I want to create a horizontal and vertical accordion in asp.net.
I have use Ajax Toolkit Accordion but cannot change its orientation:
------- ------- ------- created using ajax toolkit ------- ||||| ||||| looking for this ||||| |||||
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
Here is an working example for ASP.NET (C#)
(USER CONTROL)
<head>
<title></title>
<link href="/UserControls/Accordion/Css/Accordion.css" rel="nofollow noreferrer noopener" rel="Stylesheet" type="text/css" media="all" />
</head>
<asp:Table ID="AccordionTable" runat="server" CellPadding="0" CellSpacing="0" Width="100%">
<asp:TableRow Width="100%" Height="200px">
<%-- SLIDER 1 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide1Panel" runat="server" Style="display:block">
<p>Panel 1 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_1" runat="server" Text="Header 1" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
<%-- SLIDER 2 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide2Panel" runat="server" Style="display:none">
<p>Panel 2 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_2" runat="server" Text="Header 2" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
<%-- SLIDER 3 --%>
<asp:TableCell CssClass="Border">
<asp:Panel ID="Slide3Panel" runat="server" Style="display:none">
<p>Panel 3 content.</p>
</asp:Panel>
</asp:TableCell>
<asp:TableCell CssClass="Border" Width="20px">
<asp:LinkButton ID="LinkButton_3" runat="server" Text="Header 3" CssClass="VerticalText" OnClick="Slide_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
(CODE BEHIND)
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Slide_Click(object sender, EventArgs e)
{
ResetSlides();
LinkButton linkButton = (LinkButton)sender;
char[] separator = new char[] { '_' };
string[] trigger = linkButton.ID.Split(separator);
foreach (TableRow tblRow in AccordionTable.Rows)
{
int i = 1;
foreach (TableCell tblCell in tblRow.Cells)
{
if (i % 2 == 0)
{
// Dont touch our LinkButtons (!)
}
else
{
Panel slidePanel = (Panel)FindControl("Slide" + trigger[1] + "Panel");
if (slidePanel != null)
{
slidePanel.Style.Add("display", "block");
tblCell.Style.Remove("display");
tblCell.Style.Add("display", "block");
}
}
i++;
}
}
}
protected void ResetSlides()
{
foreach (TableRow tblRow in AccordionTable.Rows)
{
int i = 1;
foreach (TableCell tblCell in tblRow.Cells)
{
Panel slidePanel = (Panel)FindControl("Slide" + i + "Panel");
if (slidePanel != null)
{
tblCell.Style.Remove("display");
slidePanel.Style.Add("display", "none");
}
if (i % 2 == 0)
{
// Dont resize LinkButtons (!)
}
else
{
tblCell.Style.Remove("display");
tblCell.Style.Add("display", "none");
}
i++;
}
}
}
(STYLESHEET (BASIC))
.VerticalText
{
writing-mode: tb-lr;
filter: flipV flipH;
}
.Border
{
border: solid 1px Black;
}
Method 2
Try the Horizontal Accordion, a jQuery plugin.
Method 3
The two solutions didn’t work for me, so came up with this instead. Works completely without any code behind it, so you can just load it up and rely on the user to refresh the page or you can do as I have done, put some updatepanels and update sections when you click on them.
HTML
<div class="Accordion-Container">
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header One</div>
<div class="Accordion-Content">
<asp:UpdatePanel ID="upOne" runat="server">
<ContentTemplate>
Content One
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header Two</div>
<div class="Accordion-Content acSelected">
<asp:UpdatePanel ID="upTwo" runat="server">
<ContentTemplate>
Content Two
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header Three</div>
<div class="Accordion-Content">
<asp:UpdatePanel ID="upThree" runat="server">
<ContentTemplate>
Content Three
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="Accordion-Header" onclick="resizeAccordion(this);">Header Four</div>
<div class="Accordion-Content">
<asp:UpdatePanel ID="upFour" runat="server">
<ContentTemplate>
Content Four
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
CSS
html, * {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.Accordion-Container {
height: 300px;
width: 100%;
position: relative;
background-color: #006;
border: 4px solid #006;
border-radius: 10px;
}
.Accordion-Container div {
height: 100%;
display: inline-block;
}
.Accordion-Header {
background-color: #006;
color: #fff;
width: 30px;
line-height: 30px;
writing-mode: vertical-rl;
transform: rotateZ(180deg);
font-weight: bold;
font-size: 1.6em;
text-align: center;
cursor: pointer;
}
.Accordion-Header:hover {
background-image: radial-gradient(#009 10%, #006 80%);
}
.Accordion-Content {
width: 0px;
overflow: hidden;
background-color: #fff;
padding: 0;
transition: width 400ms ease-in-out;
}
.acSelected {
width: calc(100% - 148px); /* Need to adjust this to how many panels you have. 37px per panel */
padding: 2px 4px;
}
jQuery
function resizeAccordion(el) {
$('.acSelected').removeClass("acSelected");
$(el).next('.Accordion-Content').addClass('acSelected');
}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0