Super Simple Wiki Style Text Expand-Collapse with NO jQuery


I recently spent over 90 minutes searching for - and testing - code that emulates the expand/collapse features of a typical wiki-style section of text. After getting shut out about five times, I decided to create my own.

Check it out and see if this is what you're looking for.

See Demo Below!

Click on the arrows to try the expand/collapse feature.

 Section Title 1

 Section Title 2

 Section Title 3

Add as many sections as you need. Just edit the "id" values and the onclick argument value of each additional block of text.

You can even put multiple instances on the same page. Just be sure you name each instance's ID'S and ONCLICK ARGUMENTS in a unique manner so they do not conflict with the other instances' values.

The Logic

Just one simple javascript function handles all blocks of text you'd like to expand or collapse. The onclick call passes only one argument to the expand_collapse function. The function displays or hides the text block, and also alternates between UP arrow and DOWN arrow.

Get the source code!

Just grab the HEADER and BODY code below. (Please leave attribution comments intact)



Support future development - Donate Today!