How to Toggle Panel Control using JavaScript
Author: DevASPTeam
Download Source Code : 714_TogglePanel.zip
In this sample application I have toggle a panel using JavaScript you can do this in multiple ways like you can also use JavaScript but it is most easy and simple way. Hope this will help you.
To squeeze our form size we majority of time go for toggling approach this makes the web site more attractive, user friendly and gives the professional look to your site. JavaScript still has strong impact in web application domain even we have moved ourselves to client side server controls (AJAX). Well instead of getting into further discussions I will start creating application. To begin with add the script tag in header block mean <head>, your script tag will be look like as follows:
This script will make your block style either to block that is its content are visible or to none that is it’s in collapse state.
Here give id to each row which participate in toggling event like in this application my two rows participate that are id="togglePanel", id="clickEvent" make it runat="server". The simple task you will do to make it effective that is in working state is to define the click event of the row on which you click and your panel turns to expand and collapse state. Register the Page Prerender event on Page load :
Now in Prerender event, define onclick event :
This will make your row expand and collapse.