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

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>

            &nbsp;</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">

           &nbsp;</p>

       <br />

   </div>

   </form>

</body>

Step -5: Now run the application. 
 

acc1.gif
 

Figure1

Now mouse rolls out of accordion and see the result.

acc2.gif
 

Figure2

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

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.