Menu icon Foundation
Can Reveal open on specific Tabs?

Hi everybody,

I create a data-reveal-id panel linked to 2 different products; when someone click on it shows a unique page with 2 TABS, each one for one product.

Can I allow user click on a product, open the same data-reveal-id page and then already open the product TAB?

So, I click on WINE 1 link, it should open up the WINE 1 TAB,
I click on WINE 2 link, it should open up the WINE 2 TAB.

Thank you very much for any help!

<a href="#" data-reveal-id="wines">WINE 1</a>
<a href="#" data-reveal-id="wines">WINE 2</a>
            [...]
<div id="wines" class="reveal-modal" data-reveal>

<dl class="tabs vertical" data-tab>
  <dd class="tab-title active"><a href="#panel1a">WINE 1</a></dd>
  <dd class="tab-title"><a href="#panel1a">WINE 2</a></dd>
[...]
</dl>
<div class="content" id="panel1a">
    <p>Panel 1 content goes here.</p>
  </div>
  <div class="content" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
 [...] 
</div>
         

data-reveal-id reveal tab

Hi everybody,

I create a data-reveal-id panel linked to 2 different products; when someone click on it shows a unique page with 2 TABS, each one for one product.

Can I allow user click on a product, open the same data-reveal-id page and then already open the product TAB?

So, I click on WINE 1 link, it should open up the WINE 1 TAB,
I click on WINE 2 link, it should open up the WINE 2 TAB.

Thank you very much for any help!

<a href="#" data-reveal-id="wines">WINE 1</a>
<a href="#" data-reveal-id="wines">WINE 2</a>
            [...]
<div id="wines" class="reveal-modal" data-reveal>

<dl class="tabs vertical" data-tab>
  <dd class="tab-title active"><a href="#panel1a">WINE 1</a></dd>
  <dd class="tab-title"><a href="#panel1a">WINE 2</a></dd>
[...]
</dl>
<div class="content" id="panel1a">
    <p>Panel 1 content goes here.</p>
  </div>
  <div class="content" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
 [...] 
</div>
         
Preston McPeak about 5 years ago

So do you want to add tabs to your modal?

reenan about 5 years ago

http://codepen.io/naneer/pen/EgAau

Using tabs at the front page, deep_linking will mark the corresponding modal tab as active and display the correct panel of content.

The custom js was a quick way to clean the "active" states on the tabs, I tried to stick with using vanilla Foundation js as best as possible for this example.

reenan about 5 years ago

Here's another example I put together, this time using Madmimi's Angular-Foundation directives for the tabs.

http://codepen.io/naneer/pen/bwJAi

For more info on the angular port check here: http://madmimi.github.io/angular-foundation/
Madmimi's demo for the Tab Directive is exactly what you were looking for, I just reworked it in the context of your code and added the reveal modal behavior. I went with using the vanilla foundation for the reveal modal instead of the angular port cause it was easier to do.