More Demos | Expand/Collapse | Multiple Expand All/Collapse All | Everything expanded

jQuery experiments: An alternative use of expandAll()

The sites often need a bunch of different plug-ins. It will be great if we could reuse the same plug-in to accomplish different tasks.

The plug-in expandAll() gives the possibility to open or close all the collapsible sections at once - see a demonstration - jQuery: Expand/Collapse.

Here, we'll show one alternative use of this plug-in - it is applied to each individual section to toggle its visibility (a kind of "read more" link). The option to expand/collapse all sections at once is optional (See the comments in the head section of the HTML code.)

1. This is the title of my entry

The trigger Read this entry/Hide this entry is positioned before the collapsible DIV. This is the default option. A link "Back to top" is placed at the bottom of the expansible content, so that the user could easily go back to the top and close the DIV. If, when the plug-in is initialized, we specify which element contains the link to the top, a smooth scroll function will be applied to it. (See below)

If the content of the expanded DIV is a bit longer, we have to scroll up to click the trigger Hide this entry. That's why, to avoid scrolling up, a link 'Back to top of this entry' is placed at the bottom of the expanded content:

<p class="top"><a href="#entry1">Back to top of this entry</a></p>

We want to make the link to scroll smoothly. Thus, we have to specify the element containing this link - localLinks: 'p.top a'

Settings applied when the plug-in expandAll() is called:

$("#entry1").expandAll({
  expTxt : "Read this entry", 
  cllpsTxt : "Hide this entry",
  ref : "div.collapse", 
  localLinks : 'p.top a' 
});

Scroll the page, so that the top of the expanded DIV flows off-screen and click the link "Back to top of this entry" to try the smooth scroll yourself.

2. This is the title of my entry

Not recommended. The trigger Read this entry/Hide this entry is positioned after the collapsible DIV - switchPosition:'after'. If the content of the expanded DIV is longer than the height of the browser window, when we reach the end, the top of the DIV will be offscreen. Thus, when we click the trigger Hide this entry, the DIV will collapse upward and the trigger, and all the remaining content of the page, will follow it behind the top edge of the vewport.

This is the content of my entry.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Settings applied when the plug-in expandAll() is called:

$("#entry2").expandAll({
  expTxt : "Read this entry", 
  cllpsTxt : "Hide this entry",
  ref : "div.collapse", 
  switchPosition :'after'
});

Scroll the page, so that the top of the expanded DIV flows off-screen and click the trigger Hide this entry. You'll see that the content will collapse upward and the trigger will be shifted out of view.

3. This is the title of my entry

The trigger Read this entry/Hide this entry is positioned after the collapsible DIV - switchPosition:'after'. If, when hiding the collapsible DIV, the trigger is about to be pushed behind the top edge of the screen, the plug-in will reposition it near the top of the vewport - scroll:true. This animation function is called only if needed.

We want to position the switch Read this entry/Hide this entry after the collapsible DIV but when collapsing the content upward, we want to stop the shifting of the trigger before it disappears behind the top edge of the viewport.

We'll apply a scroll function to it that will dynamically reposition the trigger near the top of the screen during the collapsing, to prevent the shifting of this element out of view - scroll:true

This scrolling function will be called only if needed, i.e. if the the top of the expanded DIV is off-screen when we click the link Hide this entry.

Settings applied when the plug-in expandAll() is called:

$("#container div.scroll").expandAll({
  expTxt : "Read this entry", 
  cllpsTxt : "Hide this entry",
  ref : "div.collapse", 
  switchPosition : 'after',
  scroll : true
});

Scroll the page, so that the top of the expanded DIV flows off-screen and click the trigger Hide this entry. You'll see that the content will collapse upward but the trigger will remain in the viewport.

4. This is the title of my entry

Like the previous entry - switchPosition:'after', scroll:true

The content of this collapsible DIV is short.

Usually, the user do not need to scroll down when reading this entry, thus, when closing the content, generally, there is no need to reposition the trigger - it remains in the viewport and the animation function is not called. Try it yourself.

5. This is the title of my entry

If the text of the collapsible element is shorter than a given number of characters, we don't want to hide it - cllpsLength: 200

The number of characters in this DIV is less than 200. It is always shown.

We can choose one of the above options depending on the content of the page. We have to be careful to not confuse the users with a content that is suddenly pushed off-screen and that remains invisible untill the user scrolls up the page.