Sphinx Laravel Package

+++ date = "2017-04-10T16:42:50+01:00" draft = false weight = 180 description = "Smoothly and reliably collapse elements for extra convenience" title = "Collapse" bref="Collapsable elements are horizontally aligned tabs, in a way. Jokes aside, collapsable elements are useful and easy to setup, both for direct purpose of switching between content while collapsing everything else, and for navigation use cases" toc = true +++

{{< rawhtml >}}

<div id="my-collapse-api" data-component="collapse">

<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-1"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-2"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#box-3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-toggle"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapse-box hide"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box-3"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

</div>