ARTICLE

Horizontal Accordion script in ASP.NET using JQuery

Posted by Rohatash Kumar in Articles | ASP.NET using VB.NET on June 02, 2011

Tags: asp.net, asp.net articles, asp.net tutorials, Horizontal Accordion script using JQuery, Horizontal script

Through this article you will learn how to create Horizontal Accordion script using JQuery.

Tweet
1828
0

Download Files:

Horizontal Accordion.zip

Reader Level: Beginner

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>

</script>

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

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>

<ul>

<li>

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

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

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

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

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

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

post comment

TOP LEADERS

View All

TRENDING UP

Use of Excel.AddUnique Method in MS Excel to Display Unique Numbers in Ranges Use of PPT.ApplyTheme.BackgroundStyle in MS PowerPoint 2010 to Apply Themes & Backgrounds Use of PPT.InteractWithChartLocation in MS PowerPoint 2010 to Change Chart Locations Simple Web Report With Pivot Table and Linq to Entity Print A Chart into a Byte Stream Using New Audio Player Class With VB.NET Display Top Ten Percent Item and bottom Ten percent Item Use of PPT.ConvertTextToSmartArt in MS PowerPoint 2010 to Convert Text into SmartArt How to Find Backup Folder Data Location Using GetSpecialLocation in MS OneNote 2010 Calendar Control In WPF

View All

Sponsored by

Become a Sponsor

MOST LIKED ARTICLE

Web based Chat application in VB.NET Scroll text using timer in VB.NET Input Controls in ASP.Net Finding the first and last day of the month in VB.NET Loading a Form Icon in VB.NET

PREMIUM SPONSORS

Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.

Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.

Dynamic PDF

ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.

Horizontal Accordion script in ASP.NET using JQuery

Related Articles