How to turn snippets into an accordion

Snippets can be turned into an accordion to save space and add some dynamics to your site.

First make sure you have install snippets.

Next, browse to a page containing the snippets and open the Designer. Select "Advanced" from the top menu within the Designer and paste the following code:

/* Hide all sections */
html.SMPagesClassicLayout div.TPLSnippet > div
{
    display: none;
}
html.SMPagesClassicLayout div.TPLSnippet > h1
{
    border-bottom-style: none;
}

/* Open first section by default unless mouse is hovering snippets */
html.SMPagesClassicLayout div.TPLSnippet:first-child > div
{
    display: block;
}
html.SMPagesClassicLayout div.TPLSnippet:first-child > h1
{
    border-bottom-style: solid;
}
html.SMPagesClassicLayout div.TPLSnippets:hover div.TPLSnippet:first-child > div
{
    display: none;
}
html.SMPagesClassicLayout div.TPLSnippets:hover div.TPLSnippet:first-child > h1
{
    border-bottom-style: none;
}

/* Open section on mouse over */
html.SMPagesClassicLayout div.TPLSnippets:hover div.TPLSnippet:hover > div
{
    display: block;
}
html.SMPagesClassicLayout div.TPLSnippets:hover div.TPLSnippet:hover > h1
{
    border-bottom-style: solid;
}

/* Spacing */
html.SMPagesClassicLayout div.TPLSnippet
{
    margin: 1px;
}
html.SMPagesClassicLayout div.TPLSnippets
{
    margin: 2em;
}

 

Finally, select "Snippets" from the top menu and style the accordion to your liking. When done click Save and close the Designer.