Collapsible Panel is a technique in Web Designing where we can show one Panel at a time. Panel is nothing but a section which contains description about a Title. Here I am going to create a 4 Collapsible panels which is similar this http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx
The above link contains controls regarding Asp.Net Ajax. In order to use that control you require all the necessary tools and frameworks. Instead of that we can make use of a browser friendly library called jQuery, which is free and open source.
To create a Collapsible Panel we need mainly two Div's one is for header and other one is for description about the header or title.
The below shows how the two div's are arranged...
<div id="Header"></ div>
<div id="Description">
</div>
<div id="Header"></ div>
<div id="Description">
</div>
This is the main structure from which we will start to create a fully functional Collapsible Panel
To start with Collapsible Panel first we have to define Header/Title and Description liks this
<div id="Html" class="Header" onclick="showDescription(this)">1.Html
</div>
<div id="HtmlDescription" class="Description">
HyperText Markup Language (HTML) is the main markup language for web pages. HTML
elements are the basic building-blocks of webpages. HTML is written in the form
of HTML elements consisting of tags enclosed in angle brackets (like
<html>
), within the web page content. HTML tags most commonly come in pairs like <h1>
and <h1/>, although some tags, known as empty elements, are unpaired, for
example <img>. The first tag in a pair is the start tag, the second tag is
the end tag (they are also called opening tags and closing tags). In between these
tags web designers can add text, tags, comments and other types of text-based content.
</div>
This results the following output which is shown below
 |
| Header and Descriptio without styles |
.Header
{
width:600px;
height:30px;
text-align:left;
font-size:larger;
font-style:normal;
font-family:@Arial Unicode MS;
font-weight:bold;
background-color:#0033AA;
color:White;
border:thin solid green;
margin-top:2px;
}
.Description
{
width:600px;
height:150px;
border:thin solid gray;
color:Black;
background-color:Silver;
display:none;
}
Remember that I used display:none; inorder to make the description hidden when the page loads
Now with the Css the output appears as shown below...
 |
| Collapsible Panel with styles |
Similarly Try to use 2 or more headers for the Collapsible Panel to make it look attracting here is the output when i used with 4 Panels
 |
| Collapsible Panels with 4 Panels with Description Hidden |
Now we have to add effects so that the description is shown when we click the Header/Title, so do so there is a function called slideToggle which expands the panel when we click again it collapses to the original state when we again click on the header.
The function is...
$("#id of the element").slideToggle("slow");
slow is a parameter which specifies the effect rate.
Now we will apply this code to all the panels, here is the entire java script
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#Html").click(function () {
$("#HtmlDescription").slideToggle("slow");
});
$("#Css").click(function () {
$("#CssDescription").slideToggle("slow");
});
$("#Jquery").click(function () {
$("#JqueryDescription").slideToggle("slow");
});
$("#Ajax").click(function () {
$("#AjaxDescription").slideToggle("slow");
});
});
</script>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#Html").click(function () {
$("#HtmlDescription").slideToggle("slow");
});
$("#Css").click(function () {
$("#CssDescription").slideToggle("slow");
});
$("#Jquery").click(function () {
$("#JqueryDescription").slideToggle("slow");
});
$("#Ajax").click(function () {
$("#AjaxDescription").slideToggle("slow");
});
});
</script>
 |
| Collapsible Panel where Css is Expanded and remaining Hidden |
0 comments:
Post a Comment