Jump to main content
University Computer Centre
Structuring
University Computer Centre 

CSS Design Elements for Structuring

Accordion

Page content can be collapsed in order to compress it. The advantage of this technique is that very long description texts are only displayed when needed, while otherwise only the heading is visible. This is often used for FAQ pages.

The expanding and collapse of the content is implemented via JavaScript and CSS. In order to hide the content of tucbox-collapse-body by default, add the additional class collapsed. If the content of tucbox-collapse-body should be shown by default, add the additional class collapse in .

We have adapted the CSS styles provided by Bootstrap to that effect that users who do not use JavaScript always see the content of tucbox-collapse-body expanded.

In the first level 7±2. In the second level there is no requirement; however, we recommend a minimum of two and a maximum of 14.

HTML is the abbreviation of "Hypertext Markup Language". This is a markup language for net-like linked texts. (Hypertexts).

Most likely because it has not yet been asked.

<div id="accordion-example">
 <div class="tucbox-collapse">
  <div class="tucbox-collapse-heading">
   <p><a class="collapsed" data-toggle="collapse" href="#collapse01">How many elements should the left menu have?</a></p>
  </div>
  <div class="tucbox-collapse-body collapse" id="collapse01">
   <p>In the first level 7&plusmn;2. In the second level there is no requirement; however, we recommend a minimum of two and a maximum of 14.</p>
  </div>
 </div>

 <div class="tucbox-collapse">
  <div class="tucbox-collapse-heading">
   <p><a class="collapsed" data-toggle="collapse" href="#collapse02">What does "HTML" and "CSS" stand for?</a></p>
  </div>
  <div class="tucbox-collapse-body collapse" id="collapse02">
   <p>HTML is the abbreviation of "Hypertext Markup Language". This is a markup language for net-like linked texts. (Hypertexts).</p>
  </div>
 </div>

 <div class="tucbox-collapse">
  <div class="tucbox-collapse-heading">
   <p><a class="collapsed" data-toggle="collapse" href="#collapse03">Why is my question not answered here?</a></p>
  </div>
  <div class="tucbox-collapse-body collapse" id="collapse03">
   <p>Most likely because it has not yet been asked.</p>
  </div>
 </div>
</div>

Notes

Should you instruct several accordions on one web page, please make sure to use unique IDs, e. g.:
  • <div id="accordion01">…</div>
  • <div id="accordion02">…</div>
  • etc.

Pop-ups

You can also display additional information in a newly opening pop-up element, which then covers other page content. Only one such element can be open at a time.

See description "Using pop-up and slideshow effects".