Tuesday 12 May 2015

How to make a Collapsible panel in ASP.NET using jQuery?


Collapsible Panel is a panel which can collapse. For example, when we click the yellow panel, the another panel below it collapses and when we again click the yellow panel, collapsed panel will become again visible.


To make this type of panel in ASP.NET follow these steps:
  1. After linking jQuery in Head Section, add two panels. Make the backcolor of one panel as yellow.

  2. Now add jQuery Code below the Form Tag. 

When user clicks the panel with ID Panel1, the panel with ID Panel2 with slideToggle with slow speed, i.e. if it was collapsed then it will be shown and vice-versa.

Default syntax of slideToggle is:

$(selector).slideToggle(speed,callback);

where speed can be "slow", "fast", or it can be in milliseconds.

No comments:

Post a Comment