Iain Urquhart

Taxonomy 3

Foundation 4: Sections

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

Want to say 'thank you'?

If you find any of my work useful, feel free to make a donation amount of your choosing via PayPal — or if you like, purchase a copy of Introvert from Devot-EE and you'll get something in return :)

↑ Back to top