How to Create Collapsing Divisions in BoldGrid

One of the more convenient ways of using a lot text content is to use a collapsing division, also known as an accordion. This allows you to create paragraphs of text content and then hiding it until you or a viewer wants to see it. The code below shows you how to create collapsing divisions using the WordPress Page Builder from BoldGrid.

How to Add a Collapsing Division using your BoldGrid Post and Page Builder

• Login to your WordPress Administrator Dashboard.
• Open a post to edit, or create a new one.
• Click on an element. This will make the top menu appear.
• A menu will appear. Click on the + sign, then click on Section.
• Type in some text to serve as a marker. This lets us know where to add the code when you are in the Text editor.
• Next, click on the TEXT editor tab (if you’re not already in this editor).
• If you want to see a sample of the code working, copy the following into your site (from BootStrap – Collapse). If you want to customize the code for your content, then you would need to replace the div id from “collapseOne” to a name of your choice. If you change the div ID, then you need to make sure you also change the href to match. So, in this example, if you change “collapseOne”, then “href=#collapseOne” should be changed to match. This would be the same for each section (collapseTwo, collapseThree, etc.). The text in the div uses the ipsum rem text as a filler.Add aria-expanded so that the collapsible element is defined for readers or other assistive technologies. The value should be set to false if the collapsible element is closed by default (aria-expanded=”false”). If you want the collapsible element to be open by default, then the class option will be set like this: class=”panel-collapse collapse in”. If it is set to open, then make sure that aria-expanded is set to true (aria-expanded=”true”). The first element in the example code below is set to be open.

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          Saliquam vitae malesuada ipsum. Sed ante nisi, molestie vitae arcu et, elementum suscipit lorem. Duis consequat quam a ante consequat, vel efficitur orci molestie. Sed quis arcu vitae ante tincidunt accumsan. Nunc sed arcu quis lectus ullamcorper condimentum. Nulla posuere augue non velit commodo, vitae auctor massa venenatis. Phasellus egestas, ante sed laoreet fermentum, erat velit lacinia tellus, quis scelerisque est neque ac nibh. Aenean id neque libero. Aliquam ut augue at augue fringilla porta sit amet vitae augue.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Collapsible Group Item #3
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          Curabitur id nulla eget augue mattis volutpat vel eget ante. Nulla sollicitudin tincidunt nisi, quis vehicula turpis facilisis vitae. Nunc pellentesque est consequat consequat sagittis. Curabitur vitae tortor dapibus, blandit ex in, tempor dui. Suspendisse eu elementum augue. Integer vulputate tincidunt turpis, at ornare diam efficitur in. Pellentesque vel nibh vel nulla tincidunt luctus ut nec magna.
        </div>
      </div>
    </div>
  </div>
  
  

• Highlight the text that you added as a marker and the paste the code above to replace it.
• Modify the text or headers in the code to meet your content needs.

  Note that the code will not show the collapsible sections unless you preview the post, or save and publish it. You will not be able to see it in the visual editor.

• Once you are satisfied with your changes click on Publish or save the draft.

Adding Custom Expand/Collapse Arrows

As an option additional step, you can use a little bit of Custom CSS to add responsive arrows, or Chevrons, to add a little visual representation of the collapsible elements. Here’s a small example of Custom CSS you can use:

#accordion a.collapsed:before {
    display: block;
    float: left;
    content: "\203A";
    transform: rotate(90deg);
}
#accordion a:before {
    display: block;
    float: left;
    content: "\203A";
    transform: rotate(270deg);
}

This code uses the CSS pseudo-element :before to add the icon, represented by “\203A”, and uses the built-in CSS collapsed class to determine if the chevron should point upwards or downwards.

Congratulations, you now know how to add a collapsible section to your BoldGrid site!