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 to replace text with image in html/css

    How to indent text in a select drop down menu using PHP & CSS? [REPHRASED]

    iphone - How to implement the effect of “float” for image, just like in CSS style

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    How to make the hover attributes stays when it is clicked/active?

    How can I adjust image width and height to 100 x 100 keeping ratio?

    How to make a div 100% accross

    CSS how to align elements inside a div with 2 columns

    Nth-child css property is counting html elements with display property set to none. How to change it?

    How can I memorize all CSS shorthands?

    CSS: how to make two sections at the same line?

    How to remove the dots from custom menu with CSS

    how to achieve facebook mobile site buttons menu scroll effect?

    How to lazyload svg image given in css?

    How can the common text message format be replicated purely with CSS?

    How do I float a div to the right of a title div without affecting the content of the title?

    How to create and manage large CSS projects?

    How to make styling and functioning of form elements get not to break in all browsers?

    How to use CssStyleCollection for a UserControl?

    How to get rid of the bottom shadow in label of the css tabs

    CSS: How to make a span link to expand?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How to properly link CSS files with PHP footer and header

    Css: how to combine table and column specification into a single selector?

    How to adjust CSS to make footer fixed height?

    How to have different transistions for background-image and text in a div using CSS

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    How do I select immediate children in jQuery [closed]

    How to minimize the no of css

    How to hide text without ID?