blog

Home / DeveloperSection / Blogs / Accordion using BootStrap in ASP.Net

Accordion using BootStrap in ASP.Net

Anonymous User14597 15-Jan-2014

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

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Accordion.aspx.cs"Inherits="AutoComplete"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
   <scriptsrc="Js/jquery-1.8.3.min.js"></script>
    <scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
    <linkhref="Content/LoginStyle.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
        <h1>Accordion</h1>
        <divid="Accordion">
            <divstyle="width: 300px;">
                <h1style="height: 40px">My Programmes</h1>
                <div>
                    <p>GNIIT</p>
                    <p>DIT</p>
                    <p>B.Sc IT</p>
                </div>
            </div>
            <divstyle="width: 300px;">
                <h1style="height: 40px">MyServices</h1>
                <div>
                    <p>Web Application Developement</p>
                    <p>Android Application Developement</p>
                </div>
            </div>
            <divstyle="width: 300px">
                <h1style="height: 40px">ContactUs</h1>
                <div>
                    <p>99999999999</p>
                </div>
            </div>
            <divstyle="width: 300px">
                <h1style="height: 40px">FeedBack</h1>
                <div>
                    <p>99999999999</p>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
<scripttype="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 :-
 
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="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

 Accordion using BootStrap in ASP.Net

 

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

 

 


Updated 18-Sep-2014
I am a content writter !

Leave Comment

Comments

Liked By