In a book we read information most times in a linear way by turning page by page. This approach is a kind of inconvenient when reading texts on a screen: to scroll through long texts on a screen is annoying, especially when using smartphones even with large screens. By using a Bootstrap element, you can avoid displaying long texts at once and make it much more user-friendly for your students to get the information they need in your Moodle course.

Moodle offers a range of formatting options in its ATTO editor or in the TinyMCE text editors to help structure long texts. However, the text will remain long and confusing on small screens.

However, there is the possibility of using a bootstrap element to structure long texts on Moodle pages in a very user-friendly way: This is the accordion element Even if you’ve never heard of bootstrap – in the YouTube video I’ll show you how you can easily add the element to your Moodle course. Programming skills are not necessary. The ability to copy and paste is enough.

Make more with Moodle and Bootstrap #2: The Bootstrap Accordion Element

The Bootstrap-Code for your Moodle-page

In the video, I presented this bootstrap code. You do not have to understand the code. Only the blue parts are important for your content. For easy editing, I insert the code here. Copy it and modify the blue text parts to customize the appearance.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          First Title
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Write your text here. The text will be displayed or be hidden when the student clicks on "First Title".
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Second Title
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
         Write your text here. The text will be displayed or be hidden when the student clicks on "Second Title".
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Third title
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
         Write your text here. The text will be displayed or be hidden when the student clicks on "Third Title".
      </div>
    </div>
  </div>
</div>

Source: getbootstrap.com/docs/4.5/components/collapse/

Add more sections to your Accordion

If you like to add another headline with text, copy the following code and paste it before the last of the above code You can adjust the marked parts for each additional headline:

 <div class="card">
    <div class="card-header" id="headingFour">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Fourth title
        </button>
      </h2>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
      <div class="card-body">
         Write your text here. The text will be displayed or be hidden when the student clicks on "Fourth Title".
      </div>
    </div>
  </div>

This way you can expand this accordion as desired.

Bonus: Display up-to-date information by default

And here is a little bonus. If you would like to offer your learners a special service, you can determine which text is automatically visible when the page is accessed. To do this, search in HTML mode for the following line of code:

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample" style="">

After the word collapse you see the entry show. This means that this part of the text is visible. If you want to show another part, delete the word show and insert it at the appropriate place, for example into this part: id="collapseTwo" class="collapse show". Then save and your are finished. Now the text after the second headline will appear by default when opening the page.

Weitersagen …