Tabs

If you have several related items you'd like to organize on one landing page, tabs can come in handy.

Like accordions, tabs should be used sparingly, but in certain cases they can be useful. Here’s how to create them:

  • Open the page you want to edit, click the “Panelizer” tab in the top right, and select the “Content” link.
  • In most cases, you'll want to click the gear in the top left for “Middle column 2” and select “Add content.”
  • 
Click “Add text," fill in the title and body, and click “Save.”
  • 
Repeat this process, in the same column, for as many tabs as you need.
  • Once again, click the gear in the top left corner of the appropriate column.
  • Select “Style > Change > Responsive tab style.”
  • Click “Next" and save.

All About Tab

Below, you'll see an example of tabbed content. Forgive us for being punny again, but here we'll highlight the favorite 1980s soft drink (courtesy of Wikipedia).

Overview

Tab sodaTab (stylized as TaB) is a diet cola soft drink produced by The Coca-Cola Company, introduced in 1963, and was created by Coca-Cola after the successful sales and marketing of Diet Rite cola, owned by The Royal Crown Company; previously, Diet Rite had been the only sugarless soda on the market. Tab was marketed to consumers who wanted to "keep tabs" on their weight.

The soda was fairly popular throughout the 1960s and 1970s, and the Coca-Cola Company made several variations of it, including Tab Clear and Tab X-Tra, as well as caffeine-free versions.

The soda later garnered negative publicity when scientists speculated that its main sweetener, sodium saccharin, was a potential animal carcinogen. These studies, conducted on lab rats, resulted in mandatory warning labels on the soda throughout the late 1970s and 1980s. In recent years, the studies asserting saccharin's carcinogenic effects have been largely debunked.

Recent studies found the initial findings to be flawed and the US Food and Drug Administration (FDA) revoked the mandatory health labels in 2000, deeming no association between saccharin and cancer in humans. Additionally, in December 2010, the US Environmental Protection Agency removed saccharin from its list of hazardous substances.

History

Tab was introduced as a diet drink in 1963. Coca-Cola's marketing research department used its IBM 1401 computer to generate a list of over 185,000 four-letter words with one vowel, adding names suggested by the company's own staff; the list was stripped of any words deemed unpronounceable or too similar to existing trademarks. From a final list of about twenty names, "Tabb" was chosen, influenced by the possible play on words, and shortened to "Tab" during development, and designer Sid Dickens gave the name the capitalisation pattern ("TaB") used in the logo.

Tab has been reformulated several times. It was initially sweetened with cyclamate. After the Food and Drug Administration (FDA) issued a ban on cyclamate in 1969, saccharin was used. In 1977, the FDA moved to ban saccharin. The ban proposal was rejected by the U.S. Congress, but it did require that all products containing saccharin carry a warning label that saccharin may cause bladder cancer (a regulation eliminated in 2000). Further studies find no evidence that saccharin has yet caused an increase in bladder cancer.

At the height of its popularity, the Tab name was briefly extended to other diet soft drinks, including Tab Lemon-Lime, Tab Black Cherry, Tab Ginger Ale, Tab Root Beer and Tab Orange.

Tab's popularity began to decline in 1982, with the introduction of Diet Coke. A formula revision in 1984 blended saccharin with a small amount of aspartame; this is the formula that is currently marketed in North America.

  • Caffeine Free Tab was introduced in the 1980s with little fanfare and disappeared soon afterward.
  • In 1993, Coca-Cola released Tab Clear in the U.S., Australia and UK. It was withdrawn after less than a year.
  • Tab Energy is an energy drink released in early 2006. Though sharing the brand name, Tab Energy does not share the same taste.

Tab sales have been dwarfed by those of Diet Coke, though enough people still prefer Tab to result in a production of about 3 million cases in 2008.

Other Tab products

Tab Clear

Tab Clear, a variation of Tab, was Coca-Cola's contribution to the short-lived "clear cola" movement during the early 1990s. It was introduced in the United States on December 14, 1992, in the United Kingdom a month later and in Japan in March 1993 to initially positive results. Tab Clear was, however, discontinued in the United States, United Kingdom, and Japan after only a short time of marketing, in mid-1994. Unlike most other "clear" soft drinks, Tab Clear contained caffeine,[1] and according to the company, had the flavor of cola.

Tab Energy

Tab Energy is marketed as a low calorie energy drink named after Tab, Coca Cola's original low-calorie cola brand. While it shares the Tab name, it is not a cola product like the original Tab. Fashion Week Daily describes it as a “sweet and sour beverage” with a taste “reminiscent of a liquid Jolly Rancher.” It is sweetened with sucralose (rather than saccharin), is pale pink, and lightly carbonated.

Linking to Specific Tabs

This is a procedure to link to a specific tab on another page.

Note: Linking to a specific tab can only occur when the link is coming from a different page than the tabs are on. So it is possible to link to a specific tab on another page. It is not currently possible to link to a specific tab on the same page.


How it works:
Each tab has a certain link identifier. As a general rule the identifiers are…

  • Tab 1 is #tab-0
  • Tab 2 is #tab-1
  • Tab 3 is #tab-2

and so on.

Note: Tab identifiers can be verified by checking them in the page source or browser inspector.

To link to a specific tab add the link identifier to the end of the url. For example…

<a href=”http://hub-ahc.umn.edu/web#tab-1”>Link to tab</a>

Clicking this link will go that specific tab on the page.

Important to know:
If you adjust the order of tabs on a page after linking to it, any links that lead to it might not go to the tab you intended it to.

Tab examples

Need some inspiration? Take a look at how some other AHC units are using tabs:

Editing tabs

Once you've set up tabs with text in your Panelizer, it's easy to edit the content. Go to the page you want to edit > Click on your tab of choice > Mouse over and click the gear in the upper right > Edit and save!