wijaccordion

The wijaccordion widget is a menu UI made up of a series of content panes for displaying your information one pane at a time. Users simply select a pane to expand it and view the specified information while the other panes are collapsed, automatically organizing your user interface and optimizing the screen real estate. The wijaccordion widget is created by the jquery.wijmo.wijaccordion.js library.

Open the .cshtml for the View in which you want to display an accordion. Add an accordion DOM element like in the following markup:

<div id="accordion">
        <h1>header</h1>
        <div>content</div>
        <h2>header</h2>
        <div>content</div>
        <div>header</div>
        <div>content</div>
 </div>

Now you need to initialize the wijaccordion widget, which you can do by adding the following script to the .cshtml file:

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").wijaccordion();
    });
</script>

When you run your project, the accordion will look like this:

Accordion

For more information about wijaccordion, click one of the external links to view our Wijmo wiki documentation: