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" >
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.