This HTML page demonstrates how to use the collapsible.js script to expand and collapse sections of your page.
The page consists of several <section class="collapsible-section"> tags,
each of which contains a heading followed by one or more paragraphs of content.
Click the headings below to show and hide their content.
The visual styling of the headings when hovered and when collapsed comes from the collapsible.css file. If you do not like this styling you can craft your own CSS; it will not affect the show/hide behaviour.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer odio risus, porttitor at gravida et, lacinia ut nisl. Vestibulum augue lorem, euismod sed erat in, vulputate lobortis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam imperdiet, enim at blandit condimentum, nisi lectus facilisis ex, sit amet aliquam mauris ligula at augue. Sed quam nisl, bibendum quis orci ut, pretium sollicitudin ante. Nam tristique luctus leo, vitae viverra justo feugiat a. Phasellus lectus lectus, fringilla sit amet leo sed, luctus tempus nunc. Quisque pretium neque et metus fermentum gravida non non sapien. Mauris rhoncus erat a nulla tempus, vel porta massa ultrices. Vestibulum nec fringilla nulla. Curabitur risus eros, congue quis dapibus ac, porta in mi. Cras at felis justo.
Maecenas auctor tortor commodo, fringilla est sit amet, hendrerit risus. In leo augue, gravida sit amet congue vel, imperdiet auctor metus. Etiam vitae euismod ligula. Nam eget erat orci. In pretium commodo dui pretium lacinia. Sed et sem et sapien efficitur imperdiet vel nec nisl. Nullam condimentum nec mauris ac euismod. Aenean facilisis nisl at velit pulvinar mattis. Nam blandit viverra diam, ac euismod nulla. Pellentesque vestibulum enim nec rhoncus blandit. Fusce ullamcorper lobortis quam, ac congue ex sagittis id. Nam ornare, lectus et varius ultrices, felis ligula ullamcorper augue, ut convallis est nisi sed tortor.
Aliquam fringilla metus a placerat ornare. Nullam sed egestas nisi. Donec eleifend nisl quis ante fermentum, quis placerat turpis ornare. Integer luctus dictum quam vitae ornare. Cras volutpat est ac massa fringilla fringilla. In luctus sem purus, eget convallis ipsum maximus sit amet. Etiam vitae bibendum leo, eget cursus ante. In ac dui nisl. Suspendisse at mollis ipsum. Mauris porta odio vitae erat fermentum iaculis. Praesent porta mauris nec justo cursus, quis consectetur mauris tincidunt. Fusce nulla libero, feugiat finibus urna eu, facilisis gravida urna. Phasellus vitae orci tincidunt, luctus nisl at, laoreet arcu.
Praesent nibh purus, elementum ut tortor nec, interdum maximus eros. Phasellus accumsan non magna eu convallis. Donec et fringilla dolor, at posuere sem. Maecenas rhoncus ipsum in mollis facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam massa sapien, pellentesque in hendrerit laoreet, tincidunt vel nisl. Suspendisse potenti. Pellentesque eu nisl ut sapien lobortis faucibus non sed odio. Aliquam vulputate arcu ac magna cursus rutrum nec in turpis. Curabitur vel arcu in leo vestibulum auctor.
Nullam dictum mollis eros id laoreet. Suspendisse consectetur ornare quam, eu ultrices elit ornare quis. Vestibulum vulputate, libero ut lacinia rhoncus, ex quam ultricies nisi, quis feugiat nibh tellus id lorem. Nulla sed mauris nec nibh placerat lacinia. Ut tincidunt nulla justo, eu ullamcorper ex consectetur malesuada. Duis ultrices mollis magna, eget porttitor urna luctus a. Sed semper nec neque sit amet sodales. Nullam mollis urna eget ullamcorper sagittis. Integer mauris sapien, bibendum vitae tincidunt eget, vehicula et nisl. Nulla vel viverra odio. Sed aliquam faucibus commodo. Mauris nibh elit, vestibulum a tempus eu, ullamcorper et lacus. Donec justo felis, pulvinar vitae tempor non, lacinia ac massa.