In this blog , I’m explaining how to make  Accordion using Bootstrap in ASP.Net

Example  :-

In This Example we Create Accordion With Help BootStrap File

Form Design:- 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="AutoComplete" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="Js/jquery-1.8.3.min.js"></script>
    <script src="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <link href="Content/LoginStyle.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
        <h1>Accordion</h1>
        <div id="Accordion">
            <div style="width: 300px;">
                <h1 style="height: 40px">My Programmes</h1>
                <div>
                    <p>GNIIT</p>
                    <p>DIT</p>
                    <p>B.Sc IT</p>
                </div>
            </div>
            <div style="width: 300px;">
                <h1 style="height: 40px">MyServices</h1>
                <div>
                    <p>Web Application Developement</p>
                    <p>Android Application Developement</p>
                </div>
            </div>
            <div style="width: 300px">
                <h1 style="height: 40px">ContactUs</h1>
                <div>
                    <p>99999999999</p>
                </div>
            </div>
            <div style="width: 300px">
                <h1 style="height: 40px">FeedBack</h1>
                <div>
                    <p>99999999999</p>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Accordion").accordion({
            header: "h1"
        });
    });
</script>

 

Firstly create <div> tag give id Accordion then create three sud <div> tag of Accordion<div> tag then create one <h1> tag and one <div> tag inside every sub <div>tag then call accordion() method on Accordion <div> tag click Inside $(document).ready(function () {} function.

Use this BootStrap File :-
 
<script src="Js/jquery-1.8.3.min.js"></script>
<script src="Js/jquery-ui-1.9.2.custom.min.js"></script>
<link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

Download and add the above three files into your projects because it’s

mandatory for using the bootstrap libraries and methods. 

 

Use accordion Method :-

<script type="text/javascript">
    $(document).ready(function () {
        $("#Accordion").accordion({//acordion method
            header: "h1"
        });
    });
</script>

 

Output

 

 

 in my next post i'll explain about Date Picker using BootStrap in ASP.Net

 

 

  Modified On Sep-18-2014 01:24:20 PM

Leave Comment