Toggle

There is no JavaScript associated with the toggle funcionality. It's all CSS.

Simply use the HTML structure above where:

• You can use as many div class="toggle" as you want.
• Inside the main div, there are 3 mandatory children:
  • one input,
  • one label,
  • one div.
• The input and the label are "connected" via their attributes id and for, respectively. You can use any sequence of characters, starting with a letter (Aa to Zz), as long the id and for match in each block.
• You can use any combination of HTML elements inside the div class="show_hide".

The use of input type checkbox is a trick that allows us to profit from the CSS selector status checked/unchecked of the HTML element.

The <input> is hidden via CSS. The <label> is displayed and they are linked by the input "id" and label's "for".

The user clicks on a label. Although the checkbox is hidden, the connection id/for will check/uncheck the input.

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.