How to make UL Tabs with only HTML CSS


Tags: html,css,tabs,html-lists

Problem :

Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens.

Here's my HTML

    <style type="text/css">
      ul.tabs {
          display: table;
          list-style-type: none;
          margin: 0;
          padding: 0;
      }

      ul.tabs>li {
          float: left;
          padding: 10px;
          background-color: lightgray;
      }

      ul.tabs>li:hover {
          background-color: lightgray;
      }

      ul.tabs>li.selected {
          background-color: lightgray;
      }

      div.content {
          border: 1px solid black;
      }

      ul { overflow: auto; }

      div.content { clear: both; }
    </style>
<body>
    <ul class="tabs">
        <li><a href="#tab1">Description</a></li>
        <li><a href="#tab2">Specs</a></li>
    </ul>
    <div class="pane">
        <div class="tab1">
            <div><h2>Hello</h2></div>
        <div />
        <div>Hello hello hello.</div>
        <div />
        <div>Goodbye goodbye, goodbye</div>
        <div />
        <div />

        </div>
        <div class="tab2" style="display:none;">
        <div><h2>Hello2</h2></div>
        <div />
        <div>Hello2 hello2 hello2.</div>
        <div />
        <div>Goodbye2 goodbye2, goodbye2</div>
        <div />
        </div>
    </div>
    <div class="content">
        This should really appear on a new line.
    </div>
</body>



Solution :

Standard answer: you can't. There is no way to do this with purely HTML/CSS2, unfortunately. We can make drop-downs in CSS with the :hover psuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.

Secret answer: CSS3 [kind of] supports this. But you have to create radio buttons [weird], and it's not supported in IE7/8. If you dare...

And if you don't mind using Javascript, here's a quick solution. Reformatted your HTML, first of all. No need to put <h2>s in <div>s, and use <br /> for breaks—that's what it's there for. Also, I changed the tab <div>s to use id's instead of classes. If you have unique identifiers for an element, use id.

<ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
    <div id="tab1">
        <h2>Hello</h2>
        <p>Hello hello hello.</p>
        <p>Goodbye goodbye, goodbye</p>
    </div>
    <div id="tab2" style="display:none;">
        <h2>Hello2</h2>
        <p>Hello2 hello2 hello2.</p>
        <p>Goodbye2 goodbye2, goodbye2</p>
    </div>
</div>
<div class="content">This should really appear on a new line.</div>

Didn't touch your CSS.

For Javascript, I recommend using jQuery. It really simplifies things. All you need are these lines of code:

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $(".pane div").hide();
        $($(this).attr("href")).show();
    });
})

Basically, once the page is ready [has loaded], look for every link that's a child of a tabs ul. Attach a function that runs each time this link is clicked. When said link is clicked, hide all the tabs in the .pane div. Then, use the link's href to find the proper tab div and show it.

fiddle: http://jsfiddle.net/uFALn/18/


    CSS Howto..

    How can I change the style of thumbnails?

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How to provide responsive design for svg?

    How do I completely remove all references to application.js and application.css in a Rails app?

    twitter bootstrap: How to span links in the navbar?

    How can I center this textbox using CSS?

    Styling the input type=“file”. How do i display the filepath?

    How to select an UNTAG element in CSS

    How to use CSS import in Liferay? CSS fast load works bad

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How do I style a Javascript button using d3?

    How can I change styling and test for every page reload [closed]

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    How do I move a list's bullet point to the right side of the text?

    How to move a block of content to the right of another block without moving it in the DOM

    How to get CSS to work only on specific WordPress pages?

    how to make unorder list all in same block and have gap within each link (CSS)

    how to change the background color of the holder of an image using jquery cycle

    How to centralise a button div

    CSS - How to center an image without class or id?

    How to align an absolute DIV of unknown height outside a “relative” parent by CSS?

    How to scale background image proportionally which is in css background of a div?

    How to cancel a CSS style set by 'hover child' selector on event?

    How to have two sub-divs the same height as each other

    How to Jump-Start PhoneGap App Development [closed]

    CSS select + select How to get first select

    How do you disable the set width of parent element for child element?

    How to vertically center links in a menu?

    How to force dropdown boostrap buttons in a nav bar to fill the entire container width?

    How do I tell a page to ignore internal CSS in favor of external CSS?