Change the Expansion Direction

The wijaccordion widget allows users to expand pane content from the top, bottom, left, or right. Simply set the expandDirection option to take advantage of this feature. See the Accordion > ExpandDirection sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/accordion/ExpandDirection.

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div id="accordion">
<h3>Pane 1</h3>
                <div>
                    <p>
                        Pane 1 content here.
                    </p>
                </div>
                <h3>Pane 2</h3>
                <div>
                    <p>
                        Pane 2 content here.
                    </p>
                </div>
                            
                <h3>
                   Pane 3</h3>
                <div>
                    <p>
                        Pane 3 content here.
                    </p>
                </div>
                <h3>
                   Pane 4</h3>
                <div>
                    <p>
                        Pane 4 content here.
                    </p>
                </div>
</div>

After the last closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijaccordion widget and set the expandDirection option.

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

When you run the application, click one of the panes and notice the content expands to the left.