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
The Accordion utilises the jQuery Accordion Widget and is implemented using shortcode to frame the content in an HTML description list. Shortcode in WordPress is a piece of text wrapped in square brackets designed to implement something more complicated. Contact forms and shopping carts are an example of shortcode in WordPress.
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.
The title attribute within the shortcode creates the h3 descriptor tag
The following example demonstrates the opening of an accordion block, showing the title, the class (which here defines the first accordion block) and an optional name but to make the sections work correctly we will create some “wrap-around” shortcode.
[accordion title="Demonstrating the Accordion" class="first"]
What is wrap around shortcode?
Simple shortcode (such as the contact form implementation) is contained within a single set of square brackets, however it is also possible to pass additional content, including line breaks and header tags by wrapping between an opening and a closing shortcode block.
The following is an example of this content wrapped by shortcode.
In the Accordion shortcode, this wrapped content is the block of text that is revealed when the title is clicked on.
Important: There is a single character space between the bracket and the forward slash in the closing accordion shortcode tag in all these examples due to the WordPress rendering engine. If you are copy/pasting these examples you WILL need to remove this space
[accordion title="Demonstrating the Accordion" class="first" name="accordion-example"] The content is included after the shortcode, which is then wrapped using a closing tag (similar to a html closing tag). [ /accordion]
Implementing the shortcode
To create an accordion section, a bare minimum of two accordion sections will be needed, and these 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" name="accordion-example"] content [ /accordion] [accordion title="Not Working?" class="last"] content [ /accordion]
Shortcode options
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.
You can generate as many accordion blocks as you require, but only the first and the last blocks require identifying by the class option. The accordion shortcode layout for this page looks like this
[accordion title="Demonstrating the Accordion" class="first" name="accordion-example"] content [ /accordion] [accordion title="What is 'wrap-around' shortcode?"] content [ /accordion] [accordion title="Implementing 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 <h3> tag.
[accordion title="Not Working?" class="last" titleclass="example-class"] content [ /accordion]
Understanding the HTML
While it is not necessary for you to understand the HTML, we have included the markup as a reference point. Based on the shortcode from the previous section the outputted HTML would appear as follows;
<div id="accordion"> <h3>Demonstrating the Accordion</h3> <div class="first">Content</div> <h3>What is 'wrap-around' shortcode?</span></h3> <div class="block">Content</div> <h3>Usage - The Shortcode</span></h3> <div class="block">Content</div> <h3>Understanding the HTML</span></h3t> <div class="block">Content</div> <h3 class="example-class">Not Working?</h3> <div class="last">Content</div> </div>
Not Working
Make sure you have correctly implemented the shortcode and enabled the accordion
Version 2 themes
Seja Template > Theme Settings > Theme Content
Version 3 themes
Seja Template > Theme Settings
