Accordion demos

Example 1 - Arrows on the right

Header 1

Header 2

This example first uses the Jquery "append" function to add the triangle to the right of each heading.

It then uses the "bind" function to execute the "process_click_1" function whenever the header has been clicked.

"process_click_1" finds the div block under the heading and toggles the display of that block, changing the character used for the triangle as appropriate.

Code for example 1

Example 2 - Plus marks on the left

Header 1

Header 2

This example is practically identical to example 1, except that it uses the Jquery "prepend" function to add a plus-mark icon to the left of each headin

Code for example 2