jquery accordion - all panels closed, line breaks in headers

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
mbrowne
 
 
Posts: 19
Joined: Wed Mar 21, 2007 4:12 am

jquery accordion - all panels closed, line breaks in headers

Post 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.
User avatar
pedro-pecker
 
 
Posts: 38
Joined: Thu Feb 26, 2009 2:22 pm
Location: Devon UK

Post by pedro-pecker »

Works a treat! :D
looks a lot better on page open! :D
Many Thanks
Regards
Pedro
Post Reply