Category: HTML

04 Jun 2014 03:24

Joined:	10/07/2006
Level:	Gold
Points:	685

Points:	2

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

04 Jun 2014 03:33

Joined:	12/11/2009
Level:	Gold
Points:	43848

Points:	3

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

04 Jun 2014 04:30

Joined:	28/06/2007
Level:	Diamond
Points:	56294

Points:	2

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

03 Aug 2014 23:38

Joined:	18/07/2014
Level:	Gold
Points:	1837

Points:	3

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

TAble/Div act like accordion

Email subscription

About dotnetspider.com

Quick Links

General

Services