Creating a Collapsible Text Snippet - ADVANCED
WebAlliance doesn't have a built-in collapsible text box snippet, but this article gives a basic explanation of how you can create one using the tools you have in the Content Builder.
Though building this snippet isn't too difficult, it does require working with some of the code of the page. This is just an example of one method of accomplishing this, you are welcome to experiment with different ways of doing it.
Creating the Collapsible Text Box
From Content Builder, open the page you want to add the collapsible text box to. You can also do this in a Category Header and Brand/Supplier Content. Click in the menu for the content snippets on the right-hand side of the page and select Bootstrap Elements.
Drag the Panel snippet to the desired location on the page.
Click the Code Editor button at the top of the page.
Enter the title and the text for the collapsible text box.
In order to make the box collapsible you will need to add some code around the title. Before the title h3, you will need to add the following code:
<a href="#q1" data-toggle="collapse" style="text-decoration:none;">
The q1 part of the code can be anything you want. It's used as a reference to match up the title part of the box to the collapsible text you want to show underneath it. The # sign is required.
After the title h3 you will need to add the following code to close your reference:
</a>
Now you will want to replace the existing opening <div> code before the collapsible text. The code you will remove is:
<div class="panel-body">
The code you will want to put in its place is:
<div id="q1" class="panel-collapse collapse" style="margin: 12px;">
The q1 will need to match the reference text you entered after the # sign in the previous bit of code before the title.
You are welcome to experiment with changing the style of the title, the text, etc.
After you save your changes, you will have a collapsible text box on your page.
To add another collapsible box. Add a blank line where the red arrow is above. Copy the highlighted code that you created for your first collapsible box and paste it where you added the blank line.
You will need to replace the q1 in the second copy of the code to a different reference for both the title and the text. For instance you could change it to q2 for the second copy, q3 if you were to do a third box, etc.
Above is an example of what two back-to-back collapsible text boxes would look like in the code. They aren't required to be back to back, but if you put one in another place on the page, you will need to start by dragging a new Panel to the page. The q1 reference would still have to be unique from any of the other collapsible boxes you have already created on the page.