HIDING and SHOWING content using CSS and Bootstrap

How to Hide and Show Content Using CSS and Bootstrap: A Simple Guide

Hi there! My name is Chris Richter, and I’m excited to walk you through an easy but powerful feature you can implement in your Moodle pages: hiding and showing content using CSS and Bootstrap. This simple technique can help you manage content visibility, making your page cleaner and more user-friendly.

But before we dive into the tutorial, don’t forget to like and subscribe to my channel, and check out my Moodle courses and other tech resources linked in the description below. Now, let’s get started!

Why Hide and Show Content?

There are many scenarios in which hiding and showing content can be incredibly useful. For instance, you might want to ask your students a question but give them the space to think about it first before revealing the answer. Or perhaps you have basic information that’s relevant but might clutter the page if displayed constantly. Hiding that content behind a toggle button allows your page to stay neat while still providing access to more detailed information when needed.

In both cases, CSS and Bootstrap can easily help you achieve this with just a few lines of code.

The Example Setup

In this example, let’s say we have a simple button titled “See Example” on our page. When the student clicks on this button, a hidden content section appears, and they can click the button again to hide it. This is how it looks:

  • Button: “See Example”
  • Action: Click the button, and the content appears (or disappears).

It’s that simple! Let’s dive into how you can implement this with Bootstrap and some basic HTML.

Using Bootstrap’s Collapse Feature

To make this interaction happen, we’re using Bootstrap’s collapse feature. Bootstrap is already included in Moodle 4.0’s default theme, so you don’t need to add anything extra.

Here’s the key part of the Bootstrap code we’ll be using:

<code><button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">See Example</button>
<div id="collapseExample" class="collapse">
  <!-- Your content goes here -->
</div<span style="background-color: initial; font-family: inherit; font-size: inherit;">></span></code>Code language: JavaScript (javascript)

The main functionality relies on the data-toggle=”collapse” and data-target=”#collapseExample” attributes. These work together to tell the page to toggle (show or hide) the content inside the <div> with the specified id.

How It Works

Let’s break it down step by step:

  1. The Button: When you click the button, the data-toggle="collapse" attribute triggers the collapse functionality.
  2. The Target: The data-target="#collapseExample" points to the ID of the content you want to show or hide. In this case, the content inside the <div> with id="collapseExample".
  3. The Collapse: The <div> starts with the class collapse, which keeps the content hidden initially. Once the button is clicked, Bootstrap will toggle the class, showing or hiding the content.

Handling Multiple Content Sections

What if you want to have more than one collapsible section on the same page? Here’s where you need to be careful.

If you simply duplicate the button and content with the same IDs, clicking one will open both sections because they share the same target. To fix this, you need to make sure each collapsible section has a unique ID.

For example:

<code><button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample1">See Example 1</button>
<div id="collapseExample1" class="collapse">
  <!-- Your content for example 1 -->
</div>

<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample2">See Example 2</button>
<div id="collapseExample2" class="collapse">
  <!-- Your content for example 2 -->
</div>
</code>Code language: HTML, XML (xml)

In this updated code, we’ve changed the IDs (collapseExample1 and collapseExample2) to ensure each button targets its respective content section. Now, when you click on one, only that section will toggle, leaving the other one unaffected.

Customizing the Collapse

The beauty of the collapse feature is its versatility. You can include any type of content inside the collapsible div—text, images, forms, or even other Bootstrap components like cards. Plus, you can place these sections in columns, grids, and even nested collapsible components.

Conclusion

That’s it! You now know how to hide and show content using Bootstrap’s collapse feature. It’s a simple, yet powerful technique that can make your Moodle pages much cleaner and easier to navigate. Whether you’re using this for educational content, FAQs, or detailed information, this approach can improve the user experience on your site.

Remember, you can explore more about Moodle and other tech topics by checking out the courses linked in the description below. Thanks for reading, and I’ll catch you in the next tutorial!

By the way, if you have any questions or need further assistance, feel free to leave a comment!