HTML and CSS Reference
In-Depth Information
<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">
<!--list content below -->
</ul>
<ul id="day-2" class="t-tab__body t-grid
t-before-1-6 t-after-1-6 hidden">
<!--list content below -->
</ul>
</article>
By hiding the elements, we make the dimensions that they occupy vanish to 0. This
means the area previously occupied by that content collapses.
As the user clicks on one or the other navigation links for each day's line up, the
content for each day will frequently be hidden and shown, which will look jarring, as
shown in the following screenshot:
Search WWH ::




Custom Search