Search code examples
jqueryhtmlcsssemantic-markup

Box with tabbed navigation using semantic markup structure?

I'm trying to create an info box with tabs for switching the content of the box, like this: http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/

Easy peasy with some CSS and jQuery right? The problem is I'm trying to figure out a way to do it with semantic markup, so that when CSS/JS are disabled, it just shows the headings with their content in the correct order. All of the examples I've seen do something like this:

<div id="box-nav">
    <ul>
        <li>Content head 1</li>
        <li>Content head 2</li>
        <li>Content head 3</li>
    </ul>
</div>

<div id="box-content">
    <div id="content-1">
        <p>Blah 1. </p>
    </div>
    <div id="content-2">
        <p>Blah 2. </p>
    </div>
    <div id="content-3">
        <p>Blah 3. </p>
    </div>
</div>

which makes it pretty easy to build by separating the headings and their content, but I want to make one using this markup:

<div id="content-1">
    <h2>Content head 1</h2>
    <p>Blah 1. </p>
</div>
<div id="content-2">
    <h2>Content head 2</h2>
    <p>Blah 2. </p>
</div>
<div id="content-3">
    <h2>Content head 3</h2>
    <p>Blah 3. </p>
</div>

so that it degrades gracefully as plain HTML, but I can't quite figure it out without using jQuery to re-arrange the markup.

Anyone know a clean way of doing this?

Solution

  • I have a clean, purecss and semantical solution for you

    I use dl element instead heading elements. I think it is acceptable result.

    In my solution dl element is used for semantical tabs:

    Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list:

    markup like this:

    <div id="wrap">
    <dl>
        <dt id="ft"><a href="#tab1">TAB 1</a></dt>
            <dd id="tab1">tab1 content</dd>
        <dt id="st"><a href="#tab2">TAB 2</a></dt>
            <dd id="tab2">tab2 content</dd>
        <dt id="tt"><a href="#tab3">TAB 3</a></dt>
            <dd id="tab3">tab3 content</dd>
    </dl>
</div>

    Visual appearance will be so:
    dl element

    For creating tab interface from this markup use this CSS:

    #wrap, dt {
    position: absolute;
}

dl {
    overflow: hidden;
}

dt {
    bottom: 100%;
}

dd, dl {
    width: 640px;
    height: 400px;
}

#st {
    left: 92px;
}
#tt {
    left: 184px;
}