Tabs
Tabs display content when there is limited space and content needs to separated into sections.
<div class="js-tabbed-panel-tabs" id="tabbed-panel-c3220141452c4c64983f463db7bfb992">
<div class="column p-0">
<!-- Mobile View -->
<div class="is-hidden-tablet sl-modules-dropdown">
<div class="select is-small has-black-arrow">
<select class="js-tabbed-panel-selector has-text-weight-bold">
<option class="column has-text-weight-bold">Oxford</option>
<option class="column has-text-weight-bold">Brookes Union</option>
<option class="column has-text-weight-bold">Getting around</option>
<option class="column has-text-weight-bold">Sport</option>
<option class="column has-text-weight-bold">Support and wellbeing</option>
</select>
</div>
</div>
<div class="sl-module-switcher tabs is-mobile" tabindex="-1">
<ul class="is-hidden-mobile" role="tablist">
<li> <a class="js-tab-controller sl-tab-selector-btn" role="tab" href="">Oxford</a> </li>
<li> <a class="js-tab-controller sl-tab-selector-btn" role="tab" href="">Brookes Union</a> </li>
<li> <a class="js-tab-controller sl-tab-selector-btn" role="tab" href="">Getting around</a> </li>
<li> <a class="js-tab-controller sl-tab-selector-btn" role="tab" href="">Sport</a> </li>
<li> <a class="js-tab-controller sl-tab-selector-btn" role="tab" href="">Support and wellbeing</a> </li>
</ul>
</div>
<div class="js-selector-tabs js-tabbed-panel-slider is-0">
<div class="js-tab-panel" role="tabpanel">
<div class="js-list-expandable has-transition-height">
<div class="columns">
<div class="column is-half">
<h3 class="is-sr-only">Oxford</h3>
<div class="sl-desc">
<div class="cms-content">
<p>If you look beyond Oxford’s dreaming spires and impressive history, you’ll find a buzzing student community - almost a quarter of the Oxford population are students.</p>
<p>So whether you’re looking for pubs, clubs, nature-filled walks, museums, galleries or just some really good food; you’ll definitely find the Oxford for you. Oxford also has some events and traditions that you won’t find anywhere else, so get involved and make the most of being in this inspiring city.</p>
</div>
</div>
<div class="m-top-30"> <a class="brookes-tertiary" href="http://www.experienceoxfordshire.org/"><span>Find out more about Oxford</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </div>
</div>
<div class="column is-half">
<div class="sl-image-container">
<div class="sl-image-container">
<div class="js-embed-video" data-video="<iframe width="560" height="315" src="https://www.youtube.com/embed/VNQZ2mPzhcA?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-tab-panel" role="tabpanel">
<div class="js-list-expandable has-transition-height">
<div class="columns">
<div class="column is-half">
<h3 class="is-sr-only">Brookes Union</h3>
<div class="sl-desc">
<div class="cms-content">
<p>Brookes Union exists to support, represent and inspire our students. It is a member led organisation and you will automatically become a member when you enrol at Oxford Brookes.</p>
<p>There are lots of Union services for you to take advantage of, including student <a href="https://www.brookesunion.org.uk/societies" target="_blank">societies</a>, a <a href="https://www.brookesunion.org.uk/safetybus" target="_blank">safety bus</a>, <a href="https://www.brookesunion.org.uk/advice" target="_blank">advice services</a> and a system of <a href="https://www.brookesunion.org.uk/representation" target="_blank">student reps</a>. We also run a range of exciting <a href="http://www.brookesunion.org.uk/events">events</a>, from film nights to meet the guide dogs.</p>
</div>
</div>
<div class="m-top-30"> <a class="brookes-tertiary" href="https://www.brookesunion.org.uk/"><span>Learn more about Brookes Union</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </div>
</div>
<div class="column is-half">
<div class="sl-image-container">
<div class="sl-image-container">
<div class="js-embed-video" data-video="<iframe width="560" height="315" src="https://www.youtube.com/embed/juI8-v-_4ao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-tab-panel" role="tabpanel">
<div class="js-list-expandable has-transition-height">
<div class="columns">
<div class="column is-half">
<h3 class="is-sr-only">Getting around</h3>
<div class="sl-desc">
<div class="cms-content">
<p>Our Oxford campuses are located around the city and are all connected to each other and the city centre by the BROOKESbus service. Harcourt Hill Campus is to the west of Oxford, Headington Campus is on the eastern side of the city and Wheatley Campus is in a village seven miles east of the city centre. </p>
<p>Within Oxford, the University operates across four sites (Harcourt Hill, Headington, Marston Road and Wheatley). The Headington Campus is the largest, on which the majority of programmes will have most of their teaching delivered. Some programmes are taught more frequently at the other sites (see <a href="https://www.brookes.ac.uk/studying-at-brookes/courses/" title="course pages">course pages</a> for more details), but all students may be required, at some point during their time at the University, to attend some teaching or assessment activities at any of the Oxford sites. There is a bus service that operates between sites in Oxford.</p>
</div>
</div>
<div class="m-top-30"> <a class="brookes-tertiary" href="https://www.brookes.ac.uk/about-brookes/contacts-maps-and-campuses/"><span>More about travel</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </div>
</div>
<div class="column is-half">
<div class="sl-image-container">
<div class="sl-image-container">
<div class="js-embed-video" data-video="<iframe width="560" height="315" src="https://www.youtube.com/embed/CWuD3FfxVMA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-tab-panel" role="tabpanel">
<div class="js-list-expandable has-transition-height">
<div class="columns">
<div class="column is-half">
<h3 class="is-sr-only">Sport</h3>
<div class="sl-desc">
<div class="cms-content">
<p>We provide our students with lots of fun and affordable ways to get involved with sport and exercise, from absolute beginners to elite athletes.</p>
<h4>Keep fit</h4>
<p>Class-goers and gym-users are well catered for at our Sports Centres, and through the <a href="http://static.brookes.ac.uk/brookes-sport/brookes-active/">Brookes Active initiative</a> - a regular programme of fun and informal events, classes and activities giving you the means and motivation to keep fit.</p>
<h4>Clubs and teams</h4>
<p>Start a new sport or carry on with one you love with our <a href="http://static.brookes.ac.uk/brookes-sport/performance-and-representing-brookes/clubs-and-teams/">40+ clubs</a>, welcoming everyone from beginners to seasoned pros. Expand your social circle and keep fit as a member of a team.</p>
<h4>Facilities</h4>
<p>Brookes Sport offers excellent gyms, Oxfordshire’s premier climbing wall, a swimming pool, boathouse, courts, pitches and much more. Take a <a href="https://my.matterport.com/show/?m=sv17XJ5mP8M">virtual tour of our Headington gym</a> for an idea of what’s available.</p>
</div>
</div>
<div class="m-top-30"> <a class="brookes-tertiary" href="https://www.brookes.ac.uk/sport/"><span>More about Sport at Brookes</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </div>
</div>
<div class="column is-half">
<div class="sl-image-container">
<div class="sl-image-container">
<div class="js-embed-video" data-video="<iframe width="560" height="315" src="https://www.youtube.com/embed/bfLazlBqn6w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-tab-panel" role="tabpanel">
<div class="js-list-expandable has-transition-height">
<div class="columns">
<div class="column is-half">
<h3 class="is-sr-only">Support and wellbeing</h3>
<div class="sl-desc">
<div class="cms-content">
<p>Many students need support to make the most of their time at university.</p>
<p>We provide a wide range of services dedicated to helping you stay physically and mentally healthy, delivered by our experienced and dedicated staff.</p>
</div>
</div>
<div class="m-top-30"> <a class="brookes-tertiary" href="https://www.brookes.ac.uk/students/wellbeing/"><span>More about support and wellbeing</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </div>
</div>
<div class="column is-half">
<div class="sl-image-container">
<div class="sl-image-container">
<div class="js-embed-video" data-video="<iframe width="560" height="315" src="https://www.youtube.com/embed/7dpU2NXNYrQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>- Navigating the tabs should not refresh the page.
- Use if content headings are short.
- Use when there are 2 to 9 sections to display.
- If you will be using more than one instance of tabs, you will need to use JavaScript for each instance.
- Nested tabs are not supported.
Use ARIA roles to mark up tabs with the taxonomy roles: tablist, tab and tabpanel.
You can also associate tabs with their connected panels using ARIA properties: aria-controls and aria-labelledby.
View the WAI-ARIA practices documentation for more information.