Horizontal tabs to better organize your content

horizontal content tabs

Horizontal tabs are always useful when trying to split content into manageable chunks .

See a working example here

jQuery

   
$('.tabs-content div').hide();
$('.tabs-content div:first').show();
$('.tabs li:first').addClass('tab-active');

$('.tabs a').on('click', function(event){
	event.preventDefault();
	$('.tabs li').removeClass('tab-active');
	$(this).parent().addClass('tab-active');
	$('.tabs-content div').hide();
	$($(this).attr('href')).show();
});

CSS


	.wrapper {position: relative; width:600px; margin: 0 auto; font-size:18px; color:#333333; text-decoration: none;}
	.tabs {list-style:none; margin:0; padding-top:30px;}
	.tabs li {display: inline-block;}
	.tabs a { display: block; font-weight:300; text-align:center; text-decoration: none; color:#333333; padding:15px 25px; background:#cccccc; border-radius: 12px 12px 0 0; }
	.tabs a:hover { color:#ffffff; background:#666666; transition: all 0.5s ease 0s;}
	.tabs .tab-active a { background:#333333; border-bottom-color:transparent; color:#ffffff; cursor:default;}
	.tabs-content { border:1px solid #999999; margin-bottom:20px; padding:25px; margin:-1px 0 50px 0; height: 200px; overflow-x: auto;}

HTML


<div class="wrapper">                    

    <h3>Organize your content with tabs</h3>
    <ul class="tabs">
         <li><a href="#content-1">Tab 1</a></li><li><!-- correct inline-block spacing-->
             <a href="#content-2">Tab 2</a></li><li>
             <a href="#content-3">Tab 3</a></li><li>
             <a href="#content-4">Tab 4</a></li><li>
             <a href="#content-5">Tab 5</a></li>
    </ul>

    <div class="tabs-content">

        <div id="content-1">
            <h2>Content 1</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
        </div><!-- content-1 -->

        <div id="content-2">
            <h2>Content 2</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
        </div><!-- content-2 -->

        <div id="content-3">
            <h2>Content 3</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div><!-- content-3 -->

        <div id="content-4">
            <h2>Content 4</h2>
            <p>Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div><!-- content-4 -->

        <div id="content-5">
            <h2>Content 5</h2>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div><!-- content-5 -->

    </div><!-- tabs-content -->

</div><!-- wrapper -->

Leave a Reply

Your email address will not be published.

Views: 182