<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Additional fields</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Actual Dates</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Planned Dates</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Additional fields</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Actual Dates</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Planned Dates</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Additional fields</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Actual Dates</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Planned Dates</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Reference</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Data formats</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Spreadsheet format</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional fields</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">One to many relationships</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Additional sheets</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Numbering</a>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Multiple Rows</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
<a href="">Field Guidance</a>
<ul class="sidebar-list">
<li class="sidebar-list__item" aria-hidden>
<a href="">Dates and Times</a>
</li>
</ul>
</li>
<li class="sidebar-list__item" aria-hidden>
<a href="">Conformance</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="sidebar-list">
{% for i in list %}
<li class="sidebar-list__item" aria-hidden>
{% if i.children %}
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
{% endif %}
<a href="{{i.url}}">{{i.name}}</a>
{% if i.children %}
<ul class="sidebar-list">
{% for j in i.children %}
<li class="sidebar-list__item" aria-hidden>
{% if j.children %}
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
{% endif %}
<a href="{{j.url}}">{{j.name}}</a>
{% if j.children %}
<ul class="sidebar-list">
{% for k in j.children %}
<li class="sidebar-list__item" aria-hidden>
{% if k.children %}
<span class="sidebar-list__trigger">
<i class="material-icons">add</i>
</span>
{% endif %}
<a href="{{k.url}}">{{k.name}}</a>
{% if k.children %}
<ul class="sidebar-list">
{% for l in k.children %}
<li class="sidebar-list__item" aria-hidden>
<a href="{{l.url}}">{{l.name}}</a>
</li>
{% endfor %} {# Closes l in k #}
</ul>
{% endif %} {# Close if k.children #}
</li>
{% endfor %} {# Closes k in j #}
</ul>
{% endif %} {# Closes if j.children #}
</li>
{% endfor %} {# Closes j in i #}
</ul>
{% endif %} {# Closes if i.children #}
</li>
{% endfor %} {# Closes i in list #}
</ul>
{
"list": [
{
"name": "Reference",
"url": null,
"children": [
{
"name": "Data formats",
"url": null,
"children": [
{
"name": "Spreadsheet format",
"url": null
},
{
"name": "Additional fields",
"url": null,
"children": [
{
"name": "Actual Dates",
"url": null
},
{
"name": "Planned Dates",
"url": null
}
]
}
]
},
{
"name": "One to many relationships",
"url": null,
"children": [
{
"name": "Additional sheets",
"url": null
},
{
"name": "Numbering",
"url": null
},
{
"name": "Multiple Rows",
"url": null
}
]
},
{
"name": "Field Guidance",
"url": null,
"children": [
{
"name": "Dates and Times",
"url": null
}
]
},
{
"name": "Conformance",
"url": null
}
]
},
{
"name": "Reference",
"url": null,
"children": [
{
"name": "Data formats",
"url": null,
"children": [
{
"name": "Spreadsheet format",
"url": null
},
{
"name": "Additional fields",
"url": null,
"children": [
{
"name": "Actual Dates",
"url": null
},
{
"name": "Planned Dates",
"url": null
}
]
}
]
},
{
"name": "One to many relationships",
"url": null,
"children": [
{
"name": "Additional sheets",
"url": null
},
{
"name": "Numbering",
"url": null
},
{
"name": "Multiple Rows",
"url": null
}
]
},
{
"name": "Field Guidance",
"url": null,
"children": [
{
"name": "Dates and Times",
"url": null
}
]
},
{
"name": "Conformance",
"url": null
}
]
},
{
"name": "Reference",
"url": null,
"children": [
{
"name": "Data formats",
"url": null,
"children": [
{
"name": "Spreadsheet format",
"url": null
},
{
"name": "Additional fields",
"url": null,
"children": [
{
"name": "Actual Dates",
"url": null
},
{
"name": "Planned Dates",
"url": null
}
]
}
]
},
{
"name": "One to many relationships",
"url": null,
"children": [
{
"name": "Additional sheets",
"url": null
},
{
"name": "Numbering",
"url": null
},
{
"name": "Multiple Rows",
"url": null
}
]
},
{
"name": "Field Guidance",
"url": null,
"children": [
{
"name": "Dates and Times",
"url": null
}
]
},
{
"name": "Conformance",
"url": null
},
{
"name": "Reference",
"url": null,
"children": [
{
"name": "Data formats",
"url": null,
"children": [
{
"name": "Spreadsheet format",
"url": null
},
{
"name": "Additional fields",
"url": null,
"children": [
{
"name": "Actual Dates",
"url": null
},
{
"name": "Planned Dates",
"url": null
}
]
}
]
},
{
"name": "One to many relationships",
"url": null,
"children": [
{
"name": "Additional sheets",
"url": null
},
{
"name": "Numbering",
"url": null
},
{
"name": "Multiple Rows",
"url": null
}
]
},
{
"name": "Field Guidance",
"url": null,
"children": [
{
"name": "Dates and Times",
"url": null
}
]
},
{
"name": "Conformance",
"url": null
}
]
}
]
}
]
}
document.querySelectorAll('.sidebar-list__trigger').forEach(function(el) {
el.onclick = function(){
var target = this.parentNode;
target.classList.toggle('sidebar-list--expanded');
if (target.hasAttribute('aria-hidden')) {
target.removeAttribute('aria-hidden')
} else {
target.setAttribute('aria-hidden', '')
}
};
});
// Basic Structure
.sidebar-list {
text-align: right;
padding-left: 0;
&__item {
list-style-type: none;
position: relative;
> .sidebar-list {
max-height: 0;
overflow: hidden;
}
}
&__trigger {
position: absolute;
right: 0;
}
}
// Basic accessibility styles to
// make the elements easier to click.
.sidebar-list__trigger {
cursor: pointer;
padding: 12px 16px;
}
.sidebar-list__item {
> a {
display: block;
padding: 8px 4px;
margin-right: 40px;
color: hsla(var(--base-hsl), 1);
}
// Structural Styles for the Expanded State
&.sidebar-list--expanded {
> .sidebar-list {
height: auto;
max-height: 1000px;
}
}
}
// Cosmetic Styles
.sidebar-list__item {
> .sidebar-list {
background-color: hsla(var(--teal-hsl), 0.075);
transition: max-height .4s ease;
}
.material-icons {
font-size: 1.2rem;
transition: transform .1s ease;
transform: rotate(0);
color: hsla(var(--teal-hsl), 1);
}
&.sidebar-list--expanded {
> .sidebar-list { box-shadow: inset 0 0 4px hsla(var(--teal-hsl), .1); }
> .sidebar-list__trigger > .material-icons { transform: rotate(45deg); }
}
}
No notes defined.