Bootstrap collapse example

Bootstrap collapse allows you to add toggles to show and hide HTML content. This is handy for avoiding an overload of information on a page.

This method will still show the hidden content in the source files. Added is a function to change the toggle button text depending on the collapse state.

CodePen example.

HTML (bootstrap):

<div class="card">
    <div class="card-header">
        <h1>Collapse example</h1>
    </div>
    <div class="card-body">
        <button class="btn btn-info" type="button" onclick="return btnChangeTxt(this);"
                data-toggle="collapse"
                data-target="#CollapseExample"
                aria-expanded="false" aria-controls="CollapseExample">Show content
        </button>
        <div class="row">
            <div class="col">
                <div class="collapse multi-collapse" id="CollapseExample">
                    <div class="card card-body mt-5-lg">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                        unknown printer took a galley of type and scrambled it to make a type specimen book.
                        It has survived not only five centuries, but also the leap into electronic
                        typesetting, remaining essentially unchanged. It was popularised in the 1960s with
                        the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                        with desktop publishing software like Aldus PageMaker including versions of Lorem
                        Ipsum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Change button text javascript function:

function btnChangeTxt(el) {
  if (el.innerHTML === "Hide content") el.innerHTML = "Show content";
  else el.innerHTML = "Hide content";
}

CodePen link.

Bootstrap collapse documentation.