Horizontal and Vertical Accordion_问答_开发者_运维开发者技术经验分享

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
-------




|||||
||开发者_Go百科|||            looking for this
|||||
|||||

Here is an working example for ASP.NET (C#)

(USER CONTROL)

<head>
    <title></title>
    <link href="/UserControls/Accordion/Css/Accordion.css" 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;
}

Try the Horizontal Accordion, a jQuery plugin.

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');
        }