Page 1 of 1

jquery accordion - all panels closed, line breaks in headers

Posted: Thu Sep 16, 2010 6:28 am
by mbrowne
Here's an example: http://www.mbrowne999.net16.net/AccordionTest/

A bit of hand editing will be needed :)

1. To start with all panels closed on page load--
edit jquery.ui.accordion.min.js (added when you publish the page) first line. {options:{active:0 - change 0 to any number higher than your # of panels, or use true or false.

2. After a panel or panels have been opened, you can make them able to be all closed again-
Edit a value a little further in. Change collapsible:false to true. This allows an open panel to be closed by clicking on its header.

3. To get line breaks in headers-
edit generated page html body section at the h3 tags where you see the header text you entered. Insert <br> tags as needed. You will need to adjust the padding and/or font size when you style the object in WWB7 so it fits well.

Be aware that once you have made these edits that you don't want to publish over them. Make a backup of the page and js once edited to be safe :)

Heh. I just noticed that accordion is not very pretty in IE6.

Posted: Thu Sep 16, 2010 6:55 am
by pedro-pecker
Works a treat! :D
looks a lot better on page open! :D
Many Thanks