UCLA Web Components

Tabs 

<!-- .tabs is the container for both tabs and panels -->
<div class="tabs">
    <!-- .tablist is the container for tabs only -->
    <div role="tablist" aria-label="content-tabs">
        <button id="panel-01" class="btn tablinks" role="tab" aria-selected="true" aria-controls="panel-01-tab">
            Leadership
        </button>
        <button id="panel-02" class="btn tablinks" role="tab" aria-selected="false" aria-controls="panel-02-tab" tabindex="-1">
            Tenured
        </button>
        <button id="panel-03" class="btn tablinks" role="tab" aria-selected="false" aria-controls="panel-03-tab" tabindex="-1" data-deletable="">
            Adjunct
        </button>
    </div>
    <!-- .tabcontent contain panels of content -->
    <div id="panel-01-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-01" class="tabcontent">
        <p>Panel 1: Leadership</p>
        <p>Include content about your department's faculty leadership here.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
        <p>
            <a href="#">Example of inline link</a>.
        </p>
    </div>
    <div id="panel-02-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-02" class="tabcontent">
        <p>Panel 2: Tenured</p>
        <p>Include content about your department's tenured faculty here.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
        <p>
            <a href="#">Example of inline link</a>.
        </p>
    </div>
    <div id="panel-03-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-03" class="tabcontent">
        <p>Panel 3: Adjunct</p>
        <p>Include content about your department's adjunct faculty here.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
        <p>
            <a href="#">Example of inline link</a>.
        </p>
    </div>
</div>
 
<!-- .tabs is the container for both tabs and panels -->
<div class="tabs">
  <!-- .tablist is the container for tabs only -->
  <div role="tablist" aria-label="content-tabs">
    <button id="panel-01" class="btn tablinks" role="tab" aria-selected="true" aria-controls="panel-01-tab">
      Leadership
    </button>
    <button id="panel-02" class="btn tablinks" role="tab" aria-selected="false" aria-controls="panel-02-tab" tabindex="-1">
      Tenured
    </button>
    <button id="panel-03" class="btn tablinks" role="tab" aria-selected="false" aria-controls="panel-03-tab" tabindex="-1" data-deletable="">
      Adjunct
    </button>
  </div>
  <!-- .tabcontent contain panels of content -->
  <div id="panel-01-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-01" class="tabcontent">
    <p>Panel 1: Leadership</p>
    <p>Include content about your department's faculty leadership here.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
    <p>
       <a href="#">Example of inline link</a>.
    </p>
  </div>
  <div id="panel-02-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-02" class="tabcontent">
     <p>Panel 2: Tenured</p>
     <p>Include content about your department's tenured faculty here.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
     <p>
        <a href="#">Example of inline link</a>.
     </p>
  </div>
  <div id="panel-03-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-03" class="tabcontent">
     <p>Panel 3: Adjunct</p>
     <p>Include content about your department's adjunct faculty here.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
     <p>
        <a href="#">Example of inline link</a>.
     </p>
  </div>
</div>
 
/* No context defined. */

No notes defined.