This tutorial covers the Shortcodes Ultimate plugin. First, examine part of a post where you might want the accordion effect to happen. In this example, we’ll put the accordion effect on the following section.

<h3>Open/Close Accordion</h3>
This text will appear or disappear when the user clicks on the title for this section.


You need to do two things to create this effect: define what the user will click on to open and close a section and define what should appear or disappear when the user clicks that.

Define A Clickable Area That Opens And Closes

You’ll need to wrap an opening spoiler shortcode around whatever part of the post you want the user to click on in order to open or close the accordion. For example, if you wanted the user to be able to click on “Open/Close Accordion”, you’d wrap the title of that section like so.
[gn_spoiler title="
<h6>Social/online writer and producer</h6>
" open="0" style="1"]

Make sure you pay attention to the placement of the quotes after “title”. This spoiler shortcode uses three options, “title”, “open”, and “style”. Below, is a description of what each option does and the different values it can accept.

title="Section Title" // What the user can click on.

open="0" // Accordion closed by default.
open="1" // Accordion opened by default.

style="1" // Display the accordion with style 1.
style="2" // Display the accordion with style 2.

Define The Hideable Body Of Text

Everything below where you defined the title of the accordion section will be included in that section. Unless you want the whole page to be one, giant accordion piece, you’ll need to add a closing spoiler shortcode to denote where the accordion effect should stop.

...
This text will appear or disappear when the user clicks on the title for this section.[/gn_spoiler]


Define The Hideable Body Of Text

The basic pattern for creating an accordion section is: wrap a title in a spoiler tag and put a closing spoiler tag after the last paragraph you want to include. The following excerpt is how typical usage of the spoiler shortcode should look like. You can repeat this as many times as you want in a single post.
[gn_spoiler title="
<h6>Open/Close Accordion</h6>
" open="0" style="1"]

This text will appear or disappear when the user clicks on the title for this section.
[/gn_spoiler]