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

[afranco2]

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]

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>