Accordion Trees

Accordions are multi-pane panels that keep only one panel expanded at a time. They are commonly used for navigation.

You can use the TreeView control to implement accordions.

Use CSS to customize the header display and to hide the collapse/expand glyphs, and make sure the autoCollapse property is set to true (the default), so non-active panels are automatically collapsed.

Use Custom CSS

Ready

Angular

React

Vue

Knockout

// This file locates: "Scripts/Lesson/C1Nav/AccordionTrees.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
 
    tree.itemsSource = getData();
    tree.displayMemberPath = 'header';
    tree.childItemsPath = 'items';
    tree.isContentHtml = true;
 
    // toggle accordion style
    document.getElementById('customCss').addEventListener('click', function (e) {
        wijmo.toggleClass(tree.hostElement, 'accordion', e.target.checked);
    });
 
    // handle clicks on accordion items
    tree.hostElement.addEventListener('click', function (e) {
        if (e.target.tagName == 'A') {
            var msg = document.getElementById('msg');
            msg.innerHTML = wijmo.format('Navigating to <b>** {href} **</b>',
              e.target);
            e.preventDefault();
        }
    });
 
    // get the tree data
    function getData() {
        return [
            {
                header: 'Angular', items: [
                    { header: '<a href="ng/intro">Introduction</a>' },
                    { header: '<a href="ng/samples">Samples</a>' },
                    { header: '<a href="ng/perf">Performance</a>' }]
            },
            {
                header: 'React', items: [
                    { header: '<a href="rc/intro">Introduction</a>' },
                    { header: '<a href="rc/samples">Samples</a>' },
                    { header: '<a href="rc/perf">Performance</a>' }]
            },
            {
                header: 'Vue', items: [
                    { header: '<a href="vue/intro">Introduction</a>' },
                    { header: '<a href="vue/samples">Samples</a>' },
                    { header: '<a href="vue/perf">Performance</a>' }]
            },
            {
                header: 'Knockout', items: [
                  { header: '<a href="ko/intro">Introduction</a>' },
                  { header: '<a href="ko/samples">Samples</a>' },
                  { header: '<a href="ko/perf">Performance</a>' }]
            }
        ];
    }
});

// This file locates: "Content/css/Lesson/C1Nav/AccordionTrees.css".
/* style for messages */
.msg {
  float: right;
  text-align: right;
  color: orange;
}
 
/* accordion tree styles */
.accordion.wj-treeview {
    background: transparent;
    box-shadow: none;
}
 
/* hide collapse/expand glyphs */
.accordion.wj-treeview .wj-nodelist .wj-node:before { 
    display: none;
}
 
/* level 0 nodes (headers) */
.accordion.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.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.wj-treeview .wj-nodelist {
        padding-bottom: 6px;
    }
 
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 360px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: AccordionTrees
        public ActionResult AccordionTrees()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.AccordionTrees_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.AccordionTrees_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.AccordionTrees_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.AccordionTrees_Text3)
</p>
 
<label>
    @Html.Raw(Resources.C1Nav.AccordionTrees_Text4)
    <input id="customCss" type="checkbox" checked="checked">
</label>
<div id="msg" class="msg">@Html.Raw(Resources.C1Nav.AccordionTrees_Text5)</div>
@Html.C1().TreeView().Id("theTree").CssClass("accordion")