ASP.NET Core MVC Controls | ComponentOne
Working with Controls / TreeView / Work with TreeView / Styling and CSS / Styling TreeView / Styling Accordion
In This Topic
    Styling Accordion
    In This Topic

    An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. They are commonly used for navigation. The main advantage of using accordion is that it reduces page scrolling and allows the user to hide content that makes the web appear less complicated.

    In this sample, we will use CSS to customize the header display and to hide the collapse/expand glyphs. You need to make sure that AutoCollapse property is set to true (the default), so non-active panels are automatically collapsed.

    Accordion

    The example uses CssClass property to display the TreeView control as an accordion. The below example code uses Property model added in the QuickStart section.

    Add Custom Stylesheet

    Create a new ASP.NET MVC application. Once you have created the application, a Content folder is created in the Solution Explorer after adding the view to the application. To add a custom style sheet in your application, follow these steps:

    1. In the Solution Explorer, right-click the Content folder.
    2. From the context menu, select Add | Style Sheet. The Specify Name for Item dialog appears.
    3. Set name of the style sheet (for example: app.css) and click OK.
    4. Replace the default code of app.css file with the code given below.
      app.css
      Copy Code 
      /* accordion tree styles */

/* hide collapse/expand glyphs */
.accordion-tree.wj-treeview .wj-nodelist .wj-node:before { 
    display: none;
}

/* level 0 nodes (headers) */
.accordion-tree.wj-treeview .wj-nodelist > .wj-node {
    font-size: 120%;
    font-weight: bold;
    padding: 6px 10px;
    color: white;
    background: #106cc8;
    margin-bottom: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* level 1 nodes (navigation items) */
.accordion-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node {
    font-size: inherit;
    font-weight: normal;
    padding: 4px 1em;
    color: inherit;
    background: inherit;
    box-shadow: none;
}
    .accordion-tree.wj-treeview .wj-nodelist {
        padding-bottom: 6px;
    }
    Back to Top

    Accordion.cshtml

    HTML
    Copy Code 
    @using <ApplicationName.Models>
@model Property[]

<c1-tree-view id="accordion" class="accordion-tree" is-content-html="true" 
    auto-collapse="true" display-member-path="Header" 
    child-items-path="Items" source="Model"></c1-tree-view>
    Back to Top