Simple jQuery Tabs

by James Connolly

HTML

<div class="coverage-options">
    
    <ul class="option-nav">
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    <div class="option-content">
        
        <div id="option-1">
            <p>Tab 1 content</p>
            <p>Lorem Ipsum Dolor</p>
        </div>
        
        <div id="option-2">
            <p>Tab 2 content</p>
            <p>Lorem Ipsum Dolor</p>
        </div>
        
        <div id="option-3">
            <p>Tab 3 content</p>
            <p>Lorem Ipsum Dolor</p>
        </div>
        
        <div id="compare-plans">
            <p>Tab 4 content</p>
            <p>Lorem Ipsum Dolor</p>
        </div>
        
    </div>
    
</div>

CSS

* { margin: 0; padding: 0; }

body {padding: 30px}

li, p { font: 12px/16px Arial, Helvetica, sans-serif; }

.coverage-options {
    width: 100%;
}

.option-nav {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
}

.option-nav li {
    display:block;
    list-style: none;
}

.option-nav li a {
    display: block;
    padding: 10px;
    display: block;
    background: #DBDBDB;
    border-radius: 10px 10px 0 0;
}

.option-nav li:first-child a {
    
}

.option-content {
  background: #ECECEC;
    padding: 10px;
    margin-top: -1px;
    -moz-border-radius: 0 0 5px 5px;
}

.option-nav li a.active {
    background: #ECECEC;
    margin-bottom: -3px;
}

JavaScript

$('.option-content div').hide();
$('.option-content div:first').show();

$('.option-nav li').click(function() {
    $('.option-nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('.option-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('.option-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});