Tabs

An interactive grouping element that – when one of its items are activated - displays the content associated with that item.

Example

Open in a new window

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div 
  data-comment="Disregard this element please, for visualisation only."
  style="background-color:#f5f5f5; padding:1rem;">
<div data-controller="tabs" class="tabs">
  <nav aria-labelledby="tabs_heading">
    <h3 id="tabs_heading" class="screen_reader_only">The stages of your event</h3>
    <ol data-tabs-target="linkList">
      <li>
        <a data-action="tabs#showTab" data-tabs-target="link" href="#section_creating_your_event" id="tabitem_creating_your_event">
          1. Creating your event
        </a>
      </li>
      <li>
        <a data-action="tabs#showTab" data-tabs-target="link" href="#section_selling_tickets" id="tabitem_selling_tickets">
          2. Selling tickets
        </a>
      </li>
      <li>
        <a data-action="tabs#showTab" data-tabs-target="link" href="#section_managing_attendees" id="tabitem_managing_attendees">
          3. Managing attendees
        </a>
      </li>
      <li>
        <a data-action="tabs#showTab" data-tabs-target="link" href="#section_at_the_door" id="tabitem_at_the_door">
          4. At the door
        </a>
      </li>
      <li>
        <a data-action="tabs#showTab" data-tabs-target="link" href="#section_after_the_event" id="tabitem_after_the_event">
          5. After the event
        </a>
      </li>
    </ol>
  </nav>
  <section id="section_creating_your_event" aria-labelledby="tabitem_creating_your_event">
    <picture>
      <img src="https://placekitten.com/640/480" width="640" height="480" alt="" loading="lazy">
    </picture>
    <p>
      Create stunning event pages for in person or online events - fast and easy.
      Simple, complex or private events, you have full control over design. 
    </p>
  </section>
  <section id="section_selling_tickets" aria-labelledby="tabitem_selling_tickets">
    <picture>
      <img src="https://placekitten.com/800/400" width="800" height="400" alt="" loading="lazy">
    </picture>
    <p>
      Sell tickets in 30+ countries, with secure and flexible payment options.
      Enjoy regular payouts (via Stripe).
      Allow for discounts, promo codes, vouchers and donations & so much more…
    </p>
  </section>
  <section id="section_managing_attendees" aria-labelledby="tabitem_managing_attendees">
    <picture>
      <img src="https://placekitten.com/500/450" width="500" height="450" alt="" loading="lazy">
    </picture>
    <p>
      Keep in control over bookings and sales progress - all in one place.
      Make your life easier with automated feautures like wait lists & event reminders.
      Add as many team members as you like to help you with the craze & much more…
    </p>
  </section>
  <section id="section_at_the_door" aria-labelledby="tabitem_at_the_door">
    <picture>
      <img src="https://placekitten.com/400/600" width="400" height="600" alt="" loading="lazy">
    </picture>
    <p>
      Check your attendees in with your check-in module that’s designed to work on any smartphone or tablet.
    </p>
  </section>
  <section id="section_after_the_event" aria-labelledby="tabitem_after_the_event">
    <picture>
      <img src="https://placekitten.com/800/600" width="800" height="600" alt="" loading="lazy">
    </picture>
    <p>
      Celebrate!
      View & analyse detailed reports.
      Make the accounting wash up a breeze with the help of Xero.
      Easily duplicate events for the next round.
    </p>
  </section>
</div>
</div>

Usage notes

This element must be contained within a non-white background container, e.g. .strap_alternate.
Supports up to 10 tabs and their content
Progressively-enhanced, the supplied JS converts this from a ‘Table of Contents + sections’ to a tab group.
The script will initialise the tabs, and make the first tab and its contents ‘active’.
If you want to initialise the Tabs with a different tab active, then set data-tabs-index-value to the desired zero-based index on the .tabs element.
Uses CSS Custom Properties to control the colour of the links in the tabs.
Primary focus styles included, using the focus abstract class.

Source files