A world of Programming- Gsbprogramming: JQuery

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:

After linking jQuery in Head Section, add two panels. Make the backcolor of one panel as yellow.
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.

How to use JQuery in ASP.NET?

To use JQuery in ASP.NET follow these steps:

Download JQuery from https://jquery.com/download/ . You can Download the uncompressed, development jQuery 1.11.2
Open Visual Studio and Start New Project (ASP.NET Empty Web Application). Give an appropriate name.
Copy the Downloaded JQuery file (jquery-1.11.2.js) to the project by right clicking the project name
Now add an .aspx webform by again Right Clicking the project name->Add-> New Item
Now Link the JQuery file to added webform by using Script Tag
You can also use the JQuery provided by Google's CDN:
After linking the JQuery to webform, you can use it. But you have write the following code snippet to use the JQuery.

Here document refers to current document object. This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded: