Please note! This explanation is based on one of our newer Professional designs.
We're going to adjust the following.
Step 1 - Finding my page.
- Go to the back end of your webshop (the CMS)
- Then go to "paginabeheer" (page management) and then, on the left, to "tekstpagina's" (text pages)
- Then find the right text page here
- Click (Wijzigen) (Edit)
Step 2 - Adjusting the HTML
- Scroll down until you reach the page content
- Click "Code" here
- Delete everything in there
- Then paste the following into it
<h2>Frequently asked questions</h2><div id="accordion"> <div class="group"> <h3>Title</h3> <div> <p>Text</p> </div> </div></div>
- You now see your piece of code
- You may adjust the part in the middle
- Title is the title and text is the text
<div id="accordion"> <div class="group"> <h3>Title</h3> <div> <p>Text</p> </div> </div></div>
- This is 1 group of the accordion.
- If you save this, it looks like this on the webshop.
Step 3 - Adding multiple accordion items
- Open your piece of code again. It looks like this
- To add a group, duplicate the part from
<div class="group"> <h3>Title</h3> <div> <p>Text</p> </div> </div>
- Paste it below the other group; it then looks like this.
<h2>Frequently asked questions</h2><div id="accordion"> <div class="group"> <h3>Title</h3> <div> <p>Text</p> </div> </div> <div class="group"> <h3>Title</h3> <div> <p>Text</p> </div> </div></div>
To make it even clearer, here's another example
Everything around this is the grouping of your accordion items. This way it keeps them together.
- Then you can click code again
- Now you see the result.
- You could now optionally style your code this way.
- Then click save at the bottom of the page
Now you can view the result; it looks like this.
