Difficulty

gold-star gold-star gold-star gold-star blank-star

How long will it take?

1397068449_clock 5 Minutes

Youtube Video

youtube-icon

Not yet available

Step 1

First of all, create or navigate to the page or post that you would like to edit.

This guide will show you how to use an accordion for the purpose of an FAQ section.

Step 2

Click on the shortcode dropdown, signified by a [] symbol.

Step 3

Click on the shortcode named ‘Accordion’ to insert it into the page.

Step 4

Spend a moment looking through the presented accordion shortcode and try to understand what each part means. Identify the start, finish and each individual tab of the shortcode.

Look at the code carefully. At the start and end of the code, you will see the [ accordion ] and [ /accordion ] tags. Everything inside of these two tags are a part of the accordion. Inside of that, you will see multiple tags [ toggle ] and [ /toggle ]. Each of these represents a tab within the accordion.

Step 5

To help read the shortcode, click in between the separate parts of the shortcode and press enter to move each part down to a separate line. It should look like the screenshot to the right.

It should now be visually easier to see what each part is – each line represents a tab within the accordion.

Step 6

Insert the title for each accordion tab by double clicking on the text in quotes “Title” and then typing in the desired title.

In our example for creating an FAQ, the title would be the question.

It’s important to keep the title text within quotes, or it will not be displayed properly.

 

Step 7

Add in the content of each tab by deleting the three dots and typing in the desired text between the the two [ toggle ] tags.

For our FAQ, this will be the answer to each question.

 

Step 8

Submit, update, publish or preview your page or post and it should look similar to this image.

 

Additional Information – Adding or Removing Accordion Tabs

There is no limit to the amount of expandable tabs within an accordion. To add more, simply select and copy an entire line and paste onto a new line within the accordion. All you will then need to do is modify the title and content text. To remove a tab simply select the entire line representing the tab you want to remove and delete it.

When pasting additional lines in, you must ensure that it is being pasted inside the [ accordion ] tags.

 

Additional Information – “Open” Parameter

Each tab (represented by the Toggle code) has two parameters: one is the Title which has already been covered. The other is  called open. This can only be set to “yes” or “no”. If it is “yes” it means that the tab will be open by default when someone looks at the page. ‘”no” will mean the tab is closed.

By default, the first tab will be set to open=”yes” and the rest will be open=”no”. If you want to make none of them open by default, simple change “yes” to “no”, or if you want all of them to be open by default, change “no” to “yes”.

Of course, you can also pick and chose which are open by default. Just change each line accordingly. Remeber to keep the quotes around the “yes” and “no”

 

Top