Fiddle showing nice simple tab style, but where's the CSS

672 views Asked by At

I really like this fiddle example of a two-tier tab menu.

As you can see, it's a nice clean and understandable layout.

But -- where's the CSS that styles it??

When I copy/paste the exact same html and js into a blank fiddle page, I get what I would expect not including any CSS -- a really horrible looking result.

I have tried going through all the Fiddle options, and can't find anything resembling a stylesheet that would draw that nice menu.

Anybody have any ideas? HTML and JS are below.

<div id="tabs">
<ul>
    <li><a href="#tabs-1">First tab</a></li>
    <li><a href="#tabs-2">Second tab</a></li>
</ul>
<div id="tabs-1">
    <p>
        <div id="tabs1">
            <ul>
                <li><a href="#tabs-11">First nested 1</a></li>
                <li><a href="#tabs-12">Second nested 1</a></li>
            </ul>
            <div id="tabs-11">
                <p>Content for first nested tab 1</p>
            </div>
            <div id="tabs-12">
                <p>Content for second nested tab 2</p>
            </div>
        </div>            
    </p>
</div>
<div id="tabs-2">
    <p>
        <div id="tabs2">
            <ul>
                <li><a href="#tabs-21">First nested tab 2</a></li>
                <li><a href="#tabs-22">Second nested tab 2</a></li>
            </ul>
            <div id="tabs-21">
                <p>Content of first nested tab 2</p>
            </div>   
            <div id="tabs-22">
                <p>Content of second nested tab 2</p>
            </div>
        </div>        
    </p>
</div>

Here's the js:

$('#tabs').tabs();
$('#tabs1').tabs();
$('#tabs2').tabs();
2

There are 2 answers

0
Gerasimos Pap On BEST ANSWER

All the css comes from jQuery, so if you really want the css you have to download jQuery files and find how jquery works on that.

I do not recommend it. There is no reason to do that.

jQuery just offer this to make you use it without making it from the begin by youself.

You can download jquery from here: https://jquery.com/download/

And here is some documentation and how to use this API: http://api.jquery.com/

0
SeinopSys On

It's linked in the External resources section in the sidebar.