Tabs

Description

Tabs make it easy to explore and switch between a lot of content in a limited space, especially for step-by-step directions or to present content that has been categorized into smaller sections. Keep tab headings short so that the content fits easily on one line.

Adding and Editing

Tabs are managed using the Lists content type. To create a new set of Tabs, click Content > Lists, then create the list items.

To add the menu to a page:

  1. Drag and drop the List widget under the Content menu
  2. Select the list to display
  3. Click the Settings tab
  4. List template - Tabs
  5. Save

Code

Tabs can also be manually created within the content editor using the following code:

<ul class="tabs">
  <li>
    <div class="title">Tab 1 Title</div>
    <div class="content">
      <p>Tab 1 content</p> 
    </div>
  </li>  
  <li>
    <div class="title">Tab 2 Title</div>
    <div class="content">
      <p>Tab 2 content</p> 
    </div>
  </li>     
  <li>
    <div class="title">Tab 3 Title</div>
    <div class="content">
      <p>Tab 3 content</p> 
    </div>
  </li>           
</ul>

 

Example

Section Navigation
 
 
 
 
 
 
 
 
 
Support the next generation of Claflin Leaders
Your support provides educational enrichment through student schloarships, loan funds, instructional classroom equipment, preparing Claflin's students to be leaders of the future.