Tabs

What You Will Learn

  • How to create and insert tabs onto your page to organize your content

Quick Steps

  1. Create Tab component(s) for each corresponding component
  2. Insert Tabs onto page as "Tab Label" template; alternating between tabs and component(s) to display within each tab

When you want to list a considerable amount of content on your page that is all related but can be broken down by categories (chronological, target populations, etc.), it's best not to "laundry list" this text. Visitors are unlikely to read beyond a certain point on the page. Tabs are a helpful way to categorize text into different sections so that the pages remain shorter.

To Start:

  1. Determine how your text can be broken down. For example, if you're using tabs for a publications page, separate the publications by years (2012, 2011, 2010, etc.) before you begin to create your components. 
  2. Once you've determined how you want to break down your information, create a new component in your Building Blocks folder. Select the "Content" schema from the drop down menu.  Consider this the "landing" component for your page.
  3. Enter a "Title" for your page and in the "Text and tables" field, enter introductory text. Example: "Below, please find a listing of our recent publications." Click "Save & Close" in the Home tab once you are finished entering text. 
    • You may not always have introductory text. In this case, you can use a "Page Title" component that will only feature a title on the page. 

Creating Content with Tabs:

  1. Create a new component in your Building Blocks folder. Select the "Content"schema from the drop down menu.  
  2. Enter text in the "Text and tables" field. As you've already created a "landing" component, you do not need to enter a "Title."Depending on how many paragraphs you want under each tab, you may need to use the "Paragraph heading" field to help further distinguish your content. 
  3. Click "Save & Close"in the Home tab once you are finished entering text.  
  4. Repeat steps 2-3 for each section you want to include on your page.  Once you've completed these components, you're ready to create tab labels. 
  5. To create a tab label, click on "Create New Component" and select "Tab Label" from the schema drop down menu.
  6. Enter the name for your label. Some examples of names used for tab labels: 2012, Information for Parents, Nutritional Guide. Do not enter the word "label" in the "Tab Label" field. Repeat this step for each content component you have created. Keep the tab labels short and sweet, especially if you will have multiple tabs. 
  7. Once all of your content and tab labels have been created, you're ready to place these components on your page. In the "Component Presentations" tab of your page, click insert at the bottom. The first component to be listed should be your "landing" component (select "Content Full" from the "Component Template" drop down menu). Then insert your first tab, and select "Tab Label" from the "Component Template" drop down menu.  The third component listed is the content component that includes the information associated with that tab (this should also be a "Content Full" template.) An example order is below:
    • Publications landing
    • 2012 Tab Label
    • 2012 Publications List
    • 2011 Tab Label
    • 2011 Publications List
    • 2010 Tab Label
    • 2010 Publications List 
  8. Once you've entered all of your components onto the page, you're ready to publish!

NOTES

  • The content for each tab and the tab labels are all built onto a single page. Note that tabs can be linked to directly, like this link to web editors for sites M-P:
    http://web.yale.edu/help/sitelists/index.aspx#page6

    In addition, you can link to a tab on the same page by using an anchor link, like this one.
  • Using tabs on your page restricts your ability to include right column components. Each tabbed section cannot have it's own right column component, whatever right column component that you include on the page will always appear on the page regardless of which tab the visitor selects.

Example #1

alt text

Example #1

A- The "landing" component is used to introduce visitors to the rest of the text on the page. "Adding Text" was entered into the "Title" field.

B- This short paragraph was entered into the "Text and tables" field of the landing component.

C- Here are two tab labels, each with their own distinct content. 

D- "Basic Paragraphs" was entered into the "Paragraph heading" field to help organize the text.

E- The "To Start" and "Creating a Paragraph" titles were used in a single "text and tables" field using a H3 heading size. 

Click the image to see an example of a page with tabs.

Example #2

alt text

Example #2

A- "Recent Publications by Year" was entered in the "Title" field of the landing component of a "Page Title" component. 

B- Tab labels

C- Text that was entered in the "text and tables" field for each year. 

Click the image to see an example of a page with tabs.