Zenbox Show/Hide functionality – default to "Hide"?

A place to ask questions and get help. Be the first on your block to post ...

Zenbox Show/Hide functionality – default to "Hide"?

Postby afranco2 » Fri Mar 09, 2012 12:32 pm

I'm wondering if it's possible to set the default state of the Zenbox showHide function to "Hide" so that content is collapsed at page load.

I'm considering using them for the descriptions of Distance Education courses. Here's the page (scroll down the page a little to the "Courses" tab):
http://agronomy.unl.edu/ag-idea

It's clunky right now, using anchors to jump down and back up again. It'd be very nice if I could keep the page short by using collapsed zenboxes -- then a visitor can just show/expand the content they want to see. I did try 'style="display: none"' but that seems to permanently hide the content.

Thanks in advance!
afranco2
 
Posts: 8
Joined: Wed Aug 29, 2007 9:12 am
Location: 250 Keim Hall

Re: Zenbox Show/Hide functionality – default to "Hide"?

Postby afranco2 » Wed Mar 14, 2012 2:14 pm

Brett was able to help me with this, but I figured I'd follow up to my post in case anyone else ever comes looking for it.

There's an additional class, "autoHide" that will accomplish what I was needing. So the code would look like this:

Code: Select all
<script type="text/javascript">
   WDN.initializePlugin('zenbox');
</script>
<div class="zenbox bright showHide autoHide">
 <h3>This is a zenbox bright</h3>
 <p>This zenbox has show/hide abilities. Notice the additional class and execution of the JS. Inclusion of the autoHide class makes the collapsible content hidden by default when the page loads.</p>
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>
</div>
afranco2
 
Posts: 8
Joined: Wed Aug 29, 2007 9:12 am
Location: 250 Keim Hall


Return to Help & Assistance

Who is online

Users browsing this forum: No registered users and 1 guest

cron