Menu icon Foundation
Tabs: Addressing multiple tabs-content

Hello,

I would like to achieve the following scenario:

There are let’s say two Tabs: If I click on »Tab 1« the content of panel1 will be displayed.
But what if I would like to also display the content of another tab somewhere else, e.g. »panel 3«, by clicking on »Tab 1«?

Is it possible to address multiple id’s or a class instead, by clicking a single tab?

Thanks a lot!

<!-- The Tabs -->
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
</ul>

<!-- 1st content to be displayed -->
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Hi, this content should be displayed when tab 1 is clicked.</p>
  </div>
  <div class="content" id="panel2">
    <p>Hi, this content should be displayed when tab 2 is clicked.</p>
  </div>
</div>

<!-- 2nd Content to be displayed -->
<div class="tabs-content">
  <div class="content active" id="panel3">
    <p>Hi, this content should be also displayed when tab 1 is clicked.</p>
  </div>
  <div class="content" id="panel4">
    <p>Hi, this content should be also displayed when tab 2 is clicked.</p>
  </div>
</div>

tabsidclasscontent

Hello,

I would like to achieve the following scenario:

There are let’s say two Tabs: If I click on »Tab 1« the content of panel1 will be displayed.
But what if I would like to also display the content of another tab somewhere else, e.g. »panel 3«, by clicking on »Tab 1«?

Is it possible to address multiple id’s or a class instead, by clicking a single tab?

Thanks a lot!

<!-- The Tabs -->
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
</ul>

<!-- 1st content to be displayed -->
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Hi, this content should be displayed when tab 1 is clicked.</p>
  </div>
  <div class="content" id="panel2">
    <p>Hi, this content should be displayed when tab 2 is clicked.</p>
  </div>
</div>

<!-- 2nd Content to be displayed -->
<div class="tabs-content">
  <div class="content active" id="panel3">
    <p>Hi, this content should be also displayed when tab 1 is clicked.</p>
  </div>
  <div class="content" id="panel4">
    <p>Hi, this content should be also displayed when tab 2 is clicked.</p>
  </div>
</div>

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

You can just give the "trigger" the same id as the div's you want to toggle:

http://codepen.io/rafibomb/pen/xGOWqv

Johannes Mutter over 4 years ago

Well that was easy :D Thank you!!