Advanced CSS Tabs
Since my first article on creating CSS Tabs (no images or JavaScript) there’s been a few questions on how to accomplish it with using click vs. hover method. Instead of rehashing over the same concepts, I’ll just review how to use the :target selector to create functional and progressive CSS Tabs based on my previous article. If you want to skip to the end, then you can just view the live demo.
Modified HTML
Since we are going to be using the target selector, we’ll need to add ID’s to the links, and selectors the the HREF attributes as well. This will allow us to select the tab via it's target, and it's next sibling from the same method. The new HTML for a link will be as follows:
<a id="tab1" href="#tab1">Scamper</a>
Modified CSS
With the HTML revised, now all we need to do is change the selectors from using :hover to :target.
.tabs a:target {
declarations
}
.tabs a:target:after {
declarations
}
.tabs a:target + section.tabs-content {
declarations
}
Why It’s Awesome
Of course using this native method versus a JavaScript solution will not only be lighter, but you get some built in awesomeness in that you can link directly to a tab when the page loads by specifying it’s identifier in the URL.
Example: Load CSS Tabs or Load with selected tab
So from here you can grab the code, use it, share it, graffiti all over it… enjoy!
80 Responses to Advanced CSS Tabs
Love the Advanced CSS Tabs article. I have one question...how do you make the:
auto adjust its height based on the content in this area. For example if I have content that is very long, how do I get the section to expand with it?
Regards,
Willis
Verizon Services
Sorry for the double post but looks like some of my comment did not make it.
Love the Advanced CSS Tabs article. I have one question…how do you make the:
section class="tabs-content"
auto adjust its height based on the content in this area. For example if I have content that is very long, how do I get the section to expand with it?
That's all well and good, but I'm looking for a way for the user (and search engines), who won't know, and shouldn't have to know, the 'home' (or any other) hash tag names within the code, to be able to simply enter the unadorned URL for the site (www.domain.co.uk rather than www/domain.co.uk/#tab1).
Reluctantly I looked at minimal JS methods for firing the 'home' tab anchor: however, simply executing (or alternatively in a element at the end of the , doesn't work; JS throws an error saying that element doesn't have that method.
However, extending the HTMLAnchorElement with a click() method, (see http://stackoverflow.com/questions/1244222/how-to-simulate-click-on-anchor-with-specific-text-using-javascript-in-greasemonk) thus ...
HTMLAnchorElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
... and firing that in the does seem to work, at least in Google Chrome, which is where I've tested it thus far.
But is there some other non-JS approach I could consider? E.g. Can I set the CSS attributes of the 'home' tab/content in some way (and if so, which would they be?)?
I would like to have tab1 loaded by default when the page loads without having to use the #tab1.
Is there anyway to do this with just html/css?
Regards,
Steve
tnx
Regarding firing the first tab when the page loads: The short answer is, no, there isn't any easy way to fire without the hashtag in the URL using purely CSS. You maybe could find a work around using the weight of ID vs Classes in the same element, but it would be a convoluted solution.
To fire tab one, a javascript solution is pretty straightforward. Using jQuery, here's an example of you it can be done.
$().ready(function(){ $('#ID-OF-TAB-TO-LOAD').click(); });The jQ code to trigger the 'default' tab doesn't seem to work. If I attached a handler to the anchor's click event, it gets executed. But, the tab content is not displayed.
Good idea with css tabs. But strange, tabs don't work in IE 8 when press 'View Demo'. Is ti cross-brower?
.tab1{display: block;}
.tab:target {display: block;}
.tab:not(:target) {display: none;}
:target div.tab {display: block;}
:target div.tab + div.tab{display: none;}
View the source code at www.integritycontractingofva.com
Still building the site, but the main pages are almost complete.
Thanks!
Are you using a different script now? I had look at your source code and it looks completely different... I was hoping to see how you did what you mention above. ;)
@Peter For the sake of my health, I stay away from IE8. There very well may be issues with the demo, but the concept of using target to show / hide is cross-browser compliant.
@Brian Thanks for sharing!
@Phil the technique he's describing is just to have a sub-classed element (.tab1) set to display block on load.
window.location.hash = '#tab1';