Chapter 1 content goes here
Chapter 2 content goes here
Quiz content goes here
<div class="tabs">
<!-- Let's add a tablist role to this div. This is the container for the set of tabs-->
<!-- aria-label provides a label that describes the purpose of the set of tabs. -->
<div role="tablist" aria-label="Test Tabs">
<!-- Let's add a tab role to these buttons. this indicates the element serves as a tab control. -->
<!-- When focused, is automatically activated, causing its associated tabpanel to be displayed. Provides a title for its associated tabpanel. -->
<!-- aria-selected="true" Indicates the tab control is activated and the associated panel is displayed. Set when a tab receives focus -->
<!-- aria-selected="false" Indicates the tab control is NOT active and the associated panel is NOT displayed. Set for all except the focus tab -->>
<!-- aria-controls refers to the 'tabpanel' element id associated with the tab-->
<button role="tab" aria-selected="true" aria-controls="1-tab" id="tab1">Chapter 1</button>
<button role="tab" aria-selected="false" aria-controls="2-tab" id="tab2" tabindex="-1">Chapter 2</button>
<button role="tab" aria-selected="false" aria-controls="quiz" id="quiz1" data-deletable="" tabindex="-1">Quiz</button>
</div>
<!-- Let's add a tabpanel role to this content panel -->
<!-- aria-labelledby provides an accessible name for the panel -->
<div tabindex="0" role="tabpanel" id="1-tab" aria-labelledby="Chapter 1">
<p>Chapter 1 content goes here</p>
</div>
<!-- Let's add a tabpanel role to this content panel -->
<!-- aria-labelledby provides an accessible name for the panel -->
<div tabindex="0" role="tabpanel" id="2-tab" aria-labelledby="Chapter 2" hidden="hidden">
<p>Chapter 2 content goes here</p>
</div>
<!-- Let's add a tabpanel role to this content panel -->
<!-- aria-labelledby provides an accessible name for the panel -->
<tabindex="0" role="tabpanel" id="quiz" aria-labelledby="Quiz" hidden="hidden">
<p>Quiz content goes here</p>
</div>
</div>
<!-- Let's add the JS -->
<script src="tabs.js" type="text/javascript"></script>