jQuery UI Helpers / Accordion

Simple Accordion

You can create an accordion widget with the BeginAccordion method. This method returns an AccordionBuilder object that is used to create the content panels by calling one of its BeginPanel methods.

You should call the BeginAccordion and BeginPanel methods in a using statement. This is required to emit all the necessary HTML tags into the response.

The following example creates a simple accordion.

@using (var acc = Html.JQueryUI().BeginAccordion())
{
    using (acc.BeginPanel("Panel 1"))
    {
        <p>First panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
    using (acc.BeginPanel("Panel 2"))
    {
        <p>Second panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
    using (acc.BeginPanel("Panel 3"))
    {
        <p>Third panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
}

This is the result.

Panel 1

First panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Panel 2

Second panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Panel 3

Third panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Configuration

Like the other widgets the accordion also has a fluent configuration API. To use it, create the accordion with the Begin method which takes an Accordion as its argument. The following example demonstrates this.

@using (var acc = Html.JQueryUI().Begin(new Accordion().Active(1).Collapsible(true)))
{
    using (acc.BeginPanel("Panel 1"))
    {
        <p>First panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
    using (acc.BeginPanel("Panel 2"))
    {
        <p>Second panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
    using (acc.BeginPanel("Panel 3"))
    {
        <p>Third panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
}

This creates the accordion below.

Panel 1

First panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Panel 2

Second panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Panel 3

Third panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

HTML Helpers

Fluent Configuration API