CSS Tabs
Modern CSS magic has made it possible to get tabs in just a few lines of code. Groovy! It plays nicely with screen readers because this is really just exploiting anchor points. You can even use it to make a simple website out of one file, and you can link to individual tabs.
The main (and really only) limitation of this method is that you can't have multiple tab "groups," nor can you nest tabs, so it won't work for multilevel organization. You also can't denote a selected tab using CSS alone.
Demo
Hymenoptera Lepidoptera Diptera Close tab
Hymenoptera
Hymenoptera is a large order of insects, comprising the sawflies, wasps, bees, and ants. Over 150,000 living species of Hymenoptera have been described, in addition to over 2,000 extinct ones. Many of the species are parasitic. Females typically have a special ovipositor for inserting eggs into hosts or places that are otherwise inaccessible. This ovipositor is often modified into a stinger. The young develop through holometabolism (complete metamorphosis)—that is, they have a wormlike larval stage and an inactive pupal stage before they mature.
Lepidoptera
Lepidoptera is an order of insects that includes butterflies and moths (both are called lepidopterans). About 180,000 species of the Lepidoptera are described, in 126 families and 46 superfamilies, 10 percent of the total described species of living organisms. It is one of the most widespread and widely recognizable insect orders in the world. The Lepidoptera show many variations of the basic body structure that have evolved to gain advantages in lifestyle and distribution. Recent estimates suggest the order may have more species than earlier thought, and is among the four most speciose orders, along with the Hymenoptera, Diptera, and Coleoptera.
Diptera
Flies are insects of the order Diptera, the name being derived from the Greek δι- di- "two", and πτερόν pteron "wing". Insects of this order use only a single pair of wings to fly, the hindwings having evolved into advanced mechanosensory organs known as halteres, which act as high-speed sensors of rotational movement and allow dipterans to perform advanced aerobatics. Diptera is a large order containing an estimated 1,000,000 species including horse-flies, crane flies, hoverflies and others, although only about 125,000 species have been described.
Code
HTML: You can link to a tab wherever and however you'd like by using <a href="#tab-name">
. The following code should be used wherever you want the tabs to show up. Add new sections as needed (make sure everything stays inside the tab wrapper), and keep in mind each tab will need a unique name.
<div class="tabwrap">
<section id="tab-name">
<!--Tab content here-->
</section>
</div class="tabwrap">
CSS:
.tabwrap section {
display: none;
}
.tabwrap section:target {
display:block;
}