Expand Panes on Hover

The wijaccordion widget allows users to expand pane content by hovering the pane. Simply set the event option to take advantage of this feature. See the Accordion > Hover sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/accordion/Hover.

Create an C1 ASP.NET MVC 5 Web Application. See Creating an MVC Classic Project for more information.
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 closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijaccordion widget and set the event option to mouseover:

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

When you run the application, the panes expand when you hover over the pane headers.