a wee weblog, since 2006

Foundation 4:
Sections

3Nov
2013

Foundation Sections are similar to tabs as a way to selectively show a single panel of content at a time.

Here's what a section looks like

<div class="section-container auto" data-section>
  <section class="active">
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

Lets say you had the following Tree structure:

Parent A
    Chid A 1
    Child A 2
    Child A 3
Parent B
    Chid B 1
    Child B 2
    Child B 3
Parent C
    Chid C 1
    Child C 2
    Child C 3

You want parents to be section titles, and then to list out child nodes within those sections. With Taxonomy, you can do this quite simply:

As captured 18 February 2021 · The archived original