If used more than once on a page, adjust the IDs of the <section>s, the IDs can be anything you like (from a semantic name, to a randomised string) as long as they’re unique, and the href attribute for the corresponding nav tabs__link points to it.
<div class="tabs js-tabs">
<nav class="tabs__nav">
<ul class="tabs__list">
<li class="tabs__item"><a class="tabs__link" href="#section1">Module Route 1</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section-two">Route Two</a></li>
<li class="tabs__item"><a class="tabs__link" href="#third-section">Third Route</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section4">Fourth and Final Route</a></li>
</ul>
</nav>
<section class="tabs__section" id="section1">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="section-two">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="third-section">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="section4">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="tabs__section" id="section5">
<div class="slider--modules js-slider--variable">
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
<tr>
<td>
Staffordshire University is going global with a programme packed full of free events to start the new decade.
</td>
<td class="table--modules__credits">999 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2" class="th--pale-blue">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="">
Introduction To Applied Clinical Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Clinical Skills For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="" ">
Introduction To Communication And Professionalism For Paramedic Practice
</a>
</td>
<td class=" table--modules__credits">30 credits
</td>
</tr>
<tr>
<td>
<a href="">
Vulnerable Groups And Social Determinants Of Healthcare
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="table--modules">
<caption class="visually-hidden">Year x compulsory modules</caption>
<thead>
<tr>
<th colspan="2">Year x compulsory modules</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Introduction To Applied Clinical Paramedic Practice
</td>
<td class="table--modules__credits">30 credits</td>
</tr>
<tr>
<td>
<a href="">
Introduction To Biological Sciences And Pharmacology For Paramedic Practice
</a>
</td>
<td class="table--modules__credits">15 credits</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
<div class="tabs js-tabs">
<nav class="tabs__nav">
<ul class="tabs__list">
<li class="tabs__item"><a class="tabs__link" href="#section1">Module Route 1</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section-two">Route Two</a></li>
<li class="tabs__item"><a class="tabs__link" href="#third-section">Third Route</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section4">Fourth and Final Route</a></li>
</ul>
</nav>
<section class="tabs__section" id="section1">
{% include '@slider--modules' %}
</section>
<section class="tabs__section" id="section-two">
{% include '@slider--modules' %}
</section>
<section class="tabs__section" id="third-section">
{% include '@slider--modules' %}
</section>
<section class="tabs__section" id="section4">
{% include '@slider--modules' %}
</section>
<section class="tabs__section" id="section5">
{% include '@slider--modules' %}
</section>
</div>
.tabs {
$tabs-inline-breakpoint: 65rem;
margin-bottom: $spacing-xl;
border-bottom: $spacing-2xs solid $neutral--primary;
padding-bottom: $spacing-sm;
&__nav {
margin: 0 -1px 0 0;
border-bottom: 3px solid $neutral--primary;
text-align: center;
@media (min-width: $tabs-inline-breakpoint) {
overflow: hidden;
overflow-x: auto;
}
}
&__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: flex-end;
@media (min-width: $tabs-inline-breakpoint) {
flex-wrap: nowrap;
margin: 0;
justify-content: flex-start;
}
}
&__item {
display: flex;
align-content: center;
justify-content: center;
margin: 0 $spacing-2xs $spacing-xs;
@media (min-width: $tabs-inline-breakpoint) {
margin: 0 1px 0 0;
}
}
&__link {
display: inline-block;
font-weight: 500;
border-radius: 1em;
padding: 0.2em 1em;
background: $greyblue--light;
&:hover {
color: $neutral--primary;
}
@media (min-width: $tabs-inline-breakpoint) {
padding: 0.5em 1em;
display: flex;
justify-content: center;
align-items: center;
min-width: 8em;
border-radius: 0.2em 0.2em 0 0;
}
@media (min-width: $tabs-inline-breakpoint + 10rem) {
padding: 0.75em 2em;
}
&.is-selected {
background: $neutral--primary;
color: white;
}
}
&__section {
padding-top: $spacing-4xl;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<p>If used more than once on a page, adjust the IDs of the <section>s, the IDs can be anything you like (from a semantic name, to a randomised string) as long as they’re unique, and the href attribute for the corresponding nav tabs__link points to it.</p>
</body>
</html>
/* global jQuery */
(function ($) {
// @TODO: at some point, it'd probably be nice if tabsInit() sat here
// and was imported rather than being in app.js
})(jQuery);