jQuery Expand Collapse menu


The expand collapse functions are used for expanding or collapsing menu structured or tree structured list of items. There are various plug-ins, UI effects in jQuery to provide expand collapse option. In this tutorial, we are using jQuery show and hide functions to expand/collapse list of menu items.

HTML Menu to be Expanded/Collapsed

Let us take the list of menu items we have used in a jQuery tutorial for showing the drop-down menu. The code is,

jQuery Expand Collapse Handler

We have to Expand All link in the above HTML code. On clicking this link it will call the jQuery expand-collapse function. This function will collapse menu items if it is already in expanded mode and vise verse. The script is,


Leave A Reply

Your email address will not be published.