Horizontal Accordion script in ASP.NET using VB.NET
Through this article you will learn how to create Horizontal Accordion script using VB.NET
Through this article you will learn how to create Horizontal Accordion script using JQuery. All contents initially collapsed, content contracts when mouse rolls out of accordion.
The following are some easy steps.
Step-1: Create a simple application in Visual Studio.
Step-2: Add the following JQuery and css file.
JQuery file
File1.js
Css file
Css1.cs
These are included in the uploaded file.
Step-3
Now start work on the default .aspx page
First, link these Jquery file and styles on the page in head section as follows:
Default .aspx:
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/haccordion.css" />
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/File1.js">
</script>
<style type="text/css">
#hc1 li{
margin:0 3px 0 0;
}
#hc1 li .hpanel{
padding:5px;
background:lightblue;
}
#hc2 li{
margin:0 0 0 0;
border:12px solid black;
}
#hc2 li .hpanel{
padding:5px;
background:#E2E9FF;
cursor:hand;
cursor:pointer;
}
</style>
<script type="text/javascript">
haccordion.setup({
accordionid:'hc1', //main accordion div id
paneldimensions: { peekw: '50px', fullw: '400px', h:'158px' },
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
haccordion.setup({
accordionid:'hc2', //main accordion div id
paneldimensions: { peekw: '30px', fullw: '450px', h:'150px' },
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})
</script>
</head>
|
Step 4: Now add the following code to the body section which contains five image on the page and use the style as follows:
<body>
<form id="form1" runat="server">
<div>
<h2>
</h2>
<div id="hc1" class="haccordion">
<ul>
<li>
<div class="hpanel">
<img src="images/Rohtashimage.jpg" style="float: left; padding-right: 8px;width: 200px;
height: 148px" />
I think that India is the largest growing economy in the world and in coming years
it's gonna be a one of the richest country in the world.<br />
Rohatash Kumar<br />
</div>
</li>
<li>
<div class="hpanel">
<img src="images/aegeri-lake-switzerland_small.JPG" style="float: left; padding-right: 8px;
width: 200px; height: 148px" />Japan is a constitutional monarchy where the
power of the Emperor is very limited.
</div>
</li>
<li>
<div class="hpanel">
<img src="images/coast_small.jpg" style="float: left; padding-right: 8px; width: 200px;
height: 148px" />Malaysia is a South Asian country rich in natural resources
in areas such as agriculture, forestry and minerals.
</div>
</li>
<li>
<div class="hpanel">
<img src="images/lake-nature_small.jpg" style="float: left; padding-right: 8px;width: 200px;
height: 148px" />Agriculture has long been the most important sector of the
Cambodian economy.
</div>
</li>
<li>
<div class="hpanel">
<img src="images/usa-west-road_small.jpg" style="float: left; padding-right: 8px;
width: 200px; height: 148px" />Langkawi is particularly known for its beaches
which are among the best in Malaysia.
</div>
</li>
</ul>
</div>
<p style="clear: left">
</p>
<br />
</div>
</form>
</body>
|
Step -5: Now run the application.
Figure1
Now mouse rolls out of accordion and see the result.
Figure2
Note: You can see a demo of this article by downloading this application.