jQuery UI Accordion using ASP.NET

Here we will discuss about jQuery UI built in Accordion function which is used to show lots of different sections of data in a small amount of space.
  • 3261
Download Files:
 

The jQuery UI has a built in Accordion function which is used to show lots of different sections of data in a small amount of space. You can say that it works with nested lists, definition lists, or just nested divs. In the following example I will create an accordion effect that reveals a caption for each thumbnail.

You can also add some basic styling so that the accordion looks more presentable. Now quickly take a look to the source code below.

Code Example

<head>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".accordion h3:first").addClass("active");
        $(".accordion p:not(:first)").hide();
        $(".accordion h3").click(function () {
            $(this).next("p").slideToggle("slow")
              .siblings("p:visible").slideUp("slow");
            $(this).toggleClass("active");
            $(this).siblings("h3").removeClass("active");
        });
     });
</script>
<
style type="text/css">
    body {
       margin: 10px auto;
       width: 570px;
       font: normal normal normal small 120% Verdana;
    }
.accordion {
       width: 480px;
       border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
       padding: 7px 15px;
       margin: 0;
       border: solid 1px #c4c4c4;
       border-bottom: none;
       cursor: pointer;
}
.accordion h3:hover {
       background-color: #e3e2e2;
}
.accordion h3.active {
       background-position: right 5px;
}
.accordion p {
       background: #f7f7f7;
       margin: 0;
       padding: 10px 15px 20px;
       border-left: solid 1px #c4c4c4;
       border-right: solid 1px #c4c4c4;
}
    .style1
    {
        font-size: medium;
    }
</style>
</
head>
<
body>
<
div class="accordion" style="background-color: #FF8951">
       <h3 class="style1"
        style="background-color: #FFB9FF; font-family: Verdana; font-weight: bold;">
        Panel 1</h3>
       <p style="font-family: Verdana; font-size: small">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,    commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
       <h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 2</h3>
       <p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">Panel
        2 Content...</p>
       <h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 3</h3>
       <p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">Panel
        3 Content...</p>
       <h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 4</h3>
       <p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">Panel
        4 Content...</p>
       <h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 5</h3>
       <p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">panel
        5 Content...</p>
</div>
</
body>
</
html>

Output Window

accordian 1.gif

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.