CODEWITHSUNDEEP
htmlcsszurb-foundation
moni
moni

Reputation: 201

Foundation sections

I am trying to access Foundation 4 sections by clicking a link on a page. Here's my problem explained in more detail. This is what sections in Foundation look like :

enter image description here

And here's the code for it.

<div class="section-container vertical-tabs" data-section="vertical-tabs">
  <section>
    <p class="title" data-section-title><a href="#">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="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 3</a></p>
    <div class="content" data-section-content>
      <p>Content of section 3.</p>
    </div>
  </section>
</div>

When you click on Section 1, it opens the content of section 1. The same thing for section 2 and 3. Now, is there a way to post a link somewhere on a site, for example link to Section 1, 2 and 3. When you click on one of them, it will go on the sections part and will open the right section content based on which linked we clicked on.

Upvotes: 0

Views: 632

Answers (1)

Milos
Milos

Reputation: 240

http://foundation.zurb.com/docs/components/section.html

Checkout deep linking section for examples of how to get this functionality working.

Here is a quick example;

<div class="section-container auto" data-section data-options="deep_linking: true">
  <section>
    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
    <div class="content" data-slug="section1" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#section2">Section 2</a></p>
    <div class="content" data-slug="section2" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

To get the linking to work just add the ID to your URL. eg. http://someurl.com/#section2

Upvotes: 1

Related Questions