Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows

Hello!

We have released a new version of Likno Web Accordion Builder: Version 2.0 build #210.

Check out What's New:

- Added "Example 20 (FAQ)" which demonstrates the following concepts:

- Clean styling on pane headers: no background color or border in their CSS, *no Extra CSS*.
- *Show All/Hide All* links used in page.
- *Indicator* set used in headers (the plus/minus icons).
- The panes show/hide by clicking the *Indicator image only*, not on the entire Header (optional).
- *Independent panes* used in Accordion Behavior (any number of panes can be open at any time).

- Fixed an issue with floating accordions in IE7.

- Changed behavior when using the "Panes Show/Hide only when clicking on the Indicator image" feature: The indicator no longer shows a "Mouse Over" state when the mouse is over the rest of the Header (not on the indicator).

- Fixed the “Auto” size for “External" pages to take a height of 300px.

- Fixed an issue in IE where having an accordion without a container could cause a Javascript error.

- Fixed a CSS conflict in WordPress where some themes affected the accordion headers.

Download the new version at http://www.likno.com/jquery-accordion/download.php

Feature available since Build #204, August 24, 2011, of Likno Web Accordion Builder

This option allows you to add special HTML links in your web page, so that your visitors can "Show All" (or "Hide All") accordion panes at will (also known as "Expand All / Collapse All" functionality).

Note that this option cannot be available when the panes are “co-dependent”, because in such case only 1 pane can be open at any time. If you want to change from "co-dependent" panes to "independent" panes you must edit the “Accordion Behavior” property.

View a full implementation of this feature at "Example 11 (show hide all)" (Preview and Sample Code):
 

(note: sample links are not shown in Preview or Sample Code of other projects when enabling this option; only "Example 11 (show hide all)" shows them there)

How does this feature work?

First, enable (check) this option.

Then, position any of the following HTML links anywhere you like in your web page:

·    <a href="javascript:void(0);" class="likno_accordion_generic_showAll">Show All</a>

Clicking on the above link shows all panes.

·    <a href="javascript:void(0);" class="likno_accordion_generic_hideAll">Hide All</a>

Clicking on the above link hides all panes.

·    <a href="javascript:void(0);" class="likno_accordion_generic_toggleAll">Show All/Hide All</a>

Clicking on the above link shows or hides all panes (toggle).
 
Especially for the "toggleAll" case you may also use any of the following optional code (anywhere in page) in order to specify different content for four different states:
 
<script>

var likno_accordion_project1_toggleAll_HTML_show      = "Show All";

var likno_accordion_project1_toggleAll_HTML_show_over = "<b>Show All</b>";

var likno_accordion_project1_toggleAll_HTML_hide      = "Hide All";

var likno_accordion_project1_toggleAll_HTML_hide_over = "<b>Hide All</b>";

</script>

Some important rules:

- All links above are optional. You can use only the ones that are related to the functions that you want. For example, you may want to use only the "toggleAll" link, and not the "showAll" or "hideAll" ones.

- If you have more than one accordion controls using this option in the same page, then you must change the "_generic_" part in the filenames to the "compiled javascript project" name of the related accordion. For example, for this accordion project...

...you should use the following names:

likno_accordion_project1_showAll

likno_accordion_project1_hideAll

likno_accordion_project1_toggleAll

(similarly with the optional variables)

likno_accordion_project1_toggleAll_HTML_show

likno_accordion_project1_toggleAll_HTML_show_over

likno_accordion_project1_toggleAll_HTML_hide

likno_accordion_project1_toggleAll_HTML_hide_over

You should do this only if you have multiple accordion controls in the same page, otherwise don't bother as the "generic" name will work for any accordion no matter its name.

Hello!

We have released a new version of Likno Web Accordion Builder: Version 2.0 build #204.

Check out What's New:

- Added new property: Show All/Hide All ("expand all/collapse all" feature). This feature is presented in the "Example 11 (show hide all)" project, included in the application.

View the "Show All/Hide All" example online

- Fixed an issue when no "line-height" was defined in the CSS.

- Minor improvements in the interface.

- Upgraded/Renamed "Example 11 (show hide all)" so that it displays the usage of this feature.

Download the new version at http://www.likno.com/jquery-accordion/download.php