The Seja Framework supports accordion pages. These pages are great for displaying a large amount of content where sections can be hidden.

A great example of where this is useful is a Frequently Asked Questions list, where readers only want to see the content that is relevant to them.

Demonstrating the Accordion

This tutorial also demonstrates the working accordion. It is not complicated to do but it is very important that the shortcodes are implemented correctly or your site structure will break.

Usage - The Wrap-around

The accordion requires the use of wrap-around shortcode tags in a minimum of two blocks. For each additional accordion section, an extra shortcode block is required.

It is important that the first and last blocks are marked as such to allow the correct formatting. We’ll demonstrate using this page’s markup as an example.

What is ‘wrap-around’ shortcode?

Most shortcode included in the framework is basic. You include the shortcode call and perhaps a few variables and it displays in the page as required. Other shortcode is a little more complex, requiring the shortcode to wrap around the content that it is displaying. An example of this is as follows

[some_shortcode] The content is included after the shortcode, which is then wrapped using a closing tag (similar to a html closing tag). ##some_shortcode]

It is the content between the tags that is hidden from view until the top section is clicked.

Usage - The Shortcode

At bare-minimum you will need two accordion sections that will need to be marked as ‘first’ and ‘last’. For space and ease of reading, the wrapped content has been removed in all examples

[accordion title="Demonstrating the Accordion" class="first"]  content ##accordion]

[accordion title="Not Working?" class="last"] content  ##accordion]

title: The text that sits in the top section
class: default is ‘block’ however it’s important to use ‘first’ for the first block and ‘last’ for the final block. The back-end code that powers this feature requires these two classes to correctly render the html.

Each additional accordion section that sits between these two tags do not require any additional code, and you can generate as many accordion blocks as you require. The accordion shortcode on this page looks like this

[accordion title=\"Demonstrating the Accordion\" class=\"first\"]  content ##accordion]

[accordion title="Usage - The Wrap-around"] content ##accordion]

[accordion title="Usage - The Shortcode"] content ##accordion]

[accordion title="Understanding the HTML"] content ##accordion]

[accordion title="Not Working?" class="last"] content  ##accordion]

An optional ‘titleclass‘ exists if you require custom formatting. This is added to the <dt> tag.

[accordion title="Demonstrating the Accordion" class="first"]  content ##accordion]

[accordion title="Usage - The Wrap-around"] content ##accordion]

[accordion title="Usage - The Shortcode"] content ##accordion]

[accordion title="Understanding the HTML"] content ##accordion]

[accordion title="Not Working?" class="last" titleclass="example-class"] content ##accordion]

Understanding the HTML

While it it not necessary for you to understand the HTML, we have included the markup for your reference. Based on the shortcode from the previous section the outputted HTML would appear as follows;

<dl class="accordion" id="accordion">
  <dt><span>Demonstrating the Accordion</span></dt>
  <dd class="first">Content</dd>

  <dt><span>Usage - The Wrap-around</span></dt>
  <dd class="block">Content</dd>

  <dt><span>Usage - The Shortcode</span></dt>
  <dd class="block">Content</dd>

  <dt><span>Understanding the HTML</span></dt>
  <dd class="block">Content</dd>

  <dt class="example-class"><span>Not Working?</span></dt>
  <dd class="last">Content</dd>
</dl>

The accordion feature uses jQuery to change the state of the object on the page.

>Not Working?

Make sure you have correctly implemented the shortcode and enabled the accordion in  Seja Template > Theme Settings > Theme Content