You must Sign In to post a response.
  • Category: HTML

    TAble/Div act like accordion

    hi i want to create accordion like functionality........but i don't want to use ajax accordion or jquery accordion
    i want to use divs that can work like accordion


    please help
    how can i create accordion like functionality using divs/tables
  • #746221
    Hi,

    Just for my curiosity, Is there any issue using an inbuilt functionality? Microsoft is providing a lot of flexibility to the developers by providing the complete control to avoid writing huge code but your requirement is you require the same functionality like in accordion control without using the inbuilt control you already have it in your hand!!!!

    Since there is already a control available you may not find sample code anywhere. If you want to develop similar control then you may have to write your own code.


    Regards,
    Asheej T K

  • #746223
    You can place an image for example a "+" sign and on the click of the same either you can open the Div or can close the Div


    function showorhide(id) {
    if (document.getElementById(id).style.display == "none")
    {
    document.getElementById(id).style.display = "block";
    }
    else
    {
    document.getElementById(id).style.display = "none";
    }

    Thanks & Regards
    Anil Kumar Pandey
    Microsoft MVP, DNS MVM

  • #748574
    I have created demo for you just take a look..:)

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    function SetAccord(id) {
    $("#" + id).slideToggle(300);
    }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div>
    <div>
    <table border="1" width="100%">
    <tr>
    <td style="background-color: rgb(217, 215, 215); cursor: pointer" onclick="SetAccord('Tab1')" class="Tab1">Tab 1</td>

    </tr>
    <tr style="display: none" id="Tab1">
    <td>Tab 1 Content.....</td>

    </tr>
    <tr>
    <td style="background-color: rgb(217, 215, 215); cursor: pointer" onclick="SetAccord('Tab2')" class="Tab1">Tab 2</td>

    </tr>
    <tr style="display: none" id="Tab2">
    <td>Tab 2 Content.....</td>
    </tr>
    <tr>
    <td style="background-color: rgb(217, 215, 215); cursor: pointer" onclick="SetAccord('Tab3')" class="Tab1">Tab 3</td>

    </tr>
    <tr style="display: none" id="Tab3">
    <td>Tab 3 Content.....</td>
    </tr>
    </table>
    </div>

    </div>
    </div>
    </form>
    </body>
    </html>

    You can modify it according to your need.. :)

    Regards,
    Nirav Prabtani (Senior Web Developer)
    Email : niravjprabtani@gmail.com
    blog : niravprabtani.blogspot.in


  • Sign In to post your comments