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

Accordion using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 6980  View(s)
Rate this:

Accordion using BootStrap in ASP.Net

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

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick