HTML and CSS Reference
In-Depth Information
The following is a simplified view of the markup:
<article class="t-tabs t-section" id="lineup">
<nav class="t-tab__nav">
<a class="t-tab__navitem--active
t-tab__navitem" href="#day-1">Day 1</a>
<a class="t-tab__navitem" href="#day-2">Day
2</a>
</nav>
<ul id="day-1" class="t-tab__body t-grid
t-before-1-6 t-after-1-6">
<li class="t-grid__cell t-unit-1-2">
<a class="t-media--row" href="#">
<img width="100" height="100"
class="t-media__aside t-image--artist" src="/
img/artist-kidjo.png">
<b class="t-media__body t-title-tabartist
t-artist__name">Angelique Kidjo</b>
</a>
</li>
</ul>
<ul id="day-2" class="t-tab__body t-grid
t-before-1-6 t-after-1-6">
<li class="t-grid__cell t-unit-1-2">
<a class="t-media--row" href="#">
<img width="100" height="100"
class="t-media__aside t-image--artist" src="/
img/artist-sangre.png">
<b class="t-media__body t-title-tabartist
t-artist__name">Oumou Sangre</b>
</a>
</li>
</ul>
</article>
The simplest way to do this would be to show only Day 1 and use the hidden class
to hide the rest of the days, as shown in the following code snippet:
Search WWH ::




Custom Search