Menu ▼

Previous Next

JQuery Accordion:

By using jquery we can create the accordion menu, the following example will explain you how to do that.


Accordion with auto height

Section 1
Section 1 content here

Section 2
Section 2 content here

Section 3
Section 3 content here

Section 4
Section 4 content here


Accordion with fixed height

Section 1
Section 1 content here







Seciton 1 End
Section 2
Section 2 content here







Seciton 2 End
Section 3
Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here Section 3 content here







welcome
Section 4
Section 4 content here


CSS

   <style type="text/css">

        .accordion

        {

            width: 600px;

            display: inline-block;

            border: solid 1px #ccc;

            border-top: none;

            background-color: #f5f5f5;

        }

        .accordionheading

        {

            cursor: pointer;

            padding: 5px 15px;

            border-top: solid 1px #ccc;

            font-weight: bold;

        }

        .accordioncontent

        {

            display: none;

            background-color: #fff;

            padding: 3px 15px;

            border-top: solid 1px #ccc;

        }

        .accordionactive

        {

        }

        .fixedheight div.accordioncontent

        {

            height: 100px;

            overflow: auto;

        }

    </style>


JQuery Script

    <script language="javascript">

        $(document).ready(function () {

            $(".accordion").find(".accordioncontent:first").addClass("accordionactive").css("display", "block");

            $(".accordion").find(".accordionheading").click(function () {

                if (!$(this).next().hasClass("accordionactive")) {

                    $(this).parent().find(".accordionactive").removeClass("accordionactive").slideUp(1000)

                    $(this).next().addClass("accordionactive").slideDown(1000);

                }

            });

        });

    </script>


HTML

    <p>

        <br />

        <span class="tutorialsideHeading">Accordion with auto height</span>

        <br />

        <div id="div1" class="accordion">

            <div class="accordionheading">

                Section 1</div>

            <div class="accordioncontent">

                Section 1 content here<br />

                <br />

            </div>

            <div class="accordionheading">

                Section 2</div>

            <div class="accordioncontent">

                Section 2 content here<br />

                <br />

            </div>

            <div class="accordionheading">

                Section 3</div>

            <div class="accordioncontent">

                Section 3 content here<br />

                <br />

            </div>

            <div class="accordionheading">

                Section 4</div>

            <div class="accordioncontent">

                Section 4 content here<br />

                <br />

            </div>

        </div>

    </p>

    <p>

        <br />

        <span class="tutorialsideHeading">Accordion with fixed height</span>

        <br />

        <div id="div2" class="accordion  fixedheight">

            <div class="accordionheading">

                Section 1</div>

            <div class="accordioncontent">

                Section 1 content here<br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                Seciton 1 End

            </div>

            <div class="accordionheading">

                Section 2</div>

            <div class="accordioncontent">

                Section 2 content here<br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                Seciton 2 End

            </div>

            <div class="accordionheading">

                Section 3</div>

            <div class="accordioncontent">

                Section 3 content here Section 3 content here Section 3 content here Section 3 content

                here Section 3 content here Section 3 content here Section 3 content here

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                welcome

            </div>

            <div class="accordionheading">

                Section 4</div>

            <div class="accordioncontent">

                Section 4 content here<br />

                <br />

            </div>

        </div>

    </p>

 

Previous Next




Search dotnetlearners.com