Horizontal Accordion script in ASP.NET using VB.NET

Through this article you will learn how to create Horizontal Accordion script using VB.NET
  • 4234

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


Css file


These are included in the uploaded file.


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">

<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">


<style type="text/css">

#hc1 li{

margin:0 3px 0 0;



#hc1 li .hpanel{





#hc2 li{

margin:0 0 0 0;

border:12px solid black;



#hc2 li .hpanel{







<script type="text/javascript">


        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!




        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!






Step 4:  Now add the following code to the body section which contains five image on the page and use the style as follows:

<form id="form1" runat="server">




       <div id="hc1" class="haccordion">



                   <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 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 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 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 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.





       <p style="clear: left">


       <br />




Step -5: Now run the application. 



Now mouse rolls out of accordion and see the result.



Note: You can see a demo of this article by downloading this application.


More Articles

© 2020 DotNetHeaven. All rights reserved.