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

  • Tab 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet dui vitae mi laoreet suscipit eu nec diam. Curabitur feugiat sed dui quis fringilla. Proin scelerisque tortor purus, in sollicitudin turpis consectetur eget. Aenean tempus pulvinar sapien eget bibendum. Cras volutpat finibus ligula eu sodales. Sed eu aliquet sem. Nullam eu gravida urna. Quisque ligula urna, malesuada fermentum dictum mollis, euismod in eros. Fusce vehicula, nunc lacinia ultrices dapibus, felis elit feugiat massa, eu sagittis nibh arcu eu tortor. Nulla tellus nulla, dignissim sit amet felis vitae, consectetur molestie arcu.

    Aliquam nec ultricies lectus. Morbi eu dignissim neque, at lobortis lacus. Aenean eu nunc sed ex vehicula ultricies eget non nisl. Donec et mauris nibh. Donec vitae ligula enim. Nunc maximus pretium consectetur. Aliquam tincidunt risus ut massa viverra interdum.

  • Tab 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet dui vitae mi laoreet suscipit eu nec diam. Curabitur feugiat sed dui quis fringilla. Proin scelerisque tortor purus, in sollicitudin turpis consectetur eget. Aenean tempus pulvinar sapien eget bibendum. Cras volutpat finibus ligula eu sodales. Sed eu aliquet sem. Nullam eu gravida urna. Quisque ligula urna, malesuada fermentum dictum mollis, euismod in eros. Fusce vehicula, nunc lacinia ultrices dapibus, felis elit feugiat massa, eu sagittis nibh arcu eu tortor.

  • Tab 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet dui vitae mi laoreet suscipit eu nec diam. Curabitur feugiat sed dui quis fringilla. Proin scelerisque tortor purus, in sollicitudin turpis consectetur eget. Aenean tempus pulvinar sapien eget bibendum. Cras volutpat finibus ligula eu sodales. Sed eu aliquet sem. Nullam eu gravida urna. Quisque ligula urna, malesuada fermentum dictum mollis, euismod in eros. Fusce vehicula, nunc lacinia ultrices dapibus, felis elit feugiat massa, eu sagittis nibh arcu eu tortor. Nulla tellus nulla, dignissim sit amet felis vitae, consectetur molestie arcu.

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.