Graduate Assignment 5.5 jQuery Tabs Do Not Repeat

by Lucille Kenney

HTML

<header>
    <div class="logo">
        <img src="img/lucillekenneyLogo.png" alt="Lucille Kenney logo" class="img-responsive">
    </div>
    <div class="tagline">Tabs By Lucille Kenney</div>
</header>   
    <div class="blue-box"></div>
          
<p>We'll start with an unordered list wrapped in an aside with a class of 'tabs' and a div with an id of 'categories'.</p>
		

    <h2>Tabs</h2>
    <aside class="tabs">
    <div  id="categories">
        <h3>One</h3>
        <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis iaculis vulputate. Suspendisse ac sodales lectus, eu varius lectus. Vivamus eget tristique libero. Sed in consectetur eros.  </p>
                <p><a href="#">... >></a></p>
        </div>
            <h3>Two</h3>
            <div>
                <p>Ut congue sodales sodales. Phasellus ac faucibus eros. Nulla vitae vulputate leo, vitae tincidunt urna.</p>
                <p><a href="#"... >></a></p>
            </div>
            <h3>Three</h3>
            <div>
                <p>Praesent vulputate commodo varius. Aliquam libero risus, auctor condimentum hendrerit cursus, pulvinar id quam. </p>
                <p><a href="#">... >></a></p>
            </div>
    </div>
</aside>

CSS

/* Categories sidebar */
.tabs { 
	width: 300px;
	float: right;
}

#categories {
	padding: 50px 20px;
}

#categories h3 {
	padding-top: 4px;
}

#categories div {
	list-style-type: none;
	padding: 4px 8px;
}



/* Interactive Tabs */

#categories h3 {
	float: left;
	padding: 4px;
	margin-right: 3px;
	border: 1px solid black;
	border-bottom-width: 0px;
	background-color: #EEE;
	cursor: pointer;
}
#categories h3.active {
    display:inline-block;
	background-color: transparent;
}
#categories div {
	display: none;
	position: absolute;
	border: 1px solid black;
	width: 240px;
}
#categories div.active {
    display: block;
	position: absolute;
	margin-top: 48px;
    margin-left: 0;
	border: 1px solid black;
	width: 240px;
}

JavaScript

$(document).ready(function(){
    //immediate children of h3
    var $tabs = $('#categories > h3');
    var $contents = $('#categories > div');
    //Set up click handler
    /*$($tabs[0]).click(function(){
        $tabs.removeClass('active');
        $($tabs[0]).addClass('active');
        $contents.removeClass('active');
        $($contents[0]).addClass('active');
    });
    
    $($tabs[1]).click(function(){
        $tabs.removeClass('active');
        $($tabs[1]).addClass('active');
        $contents.removeClass('active');
        $($contents[1]).addClass('active');
    });
    
    $($tabs[2]).click(function(){
        $tabs.removeClass('active');
        $($tabs[2]).addClass('active');
        $contents.removeClass('active');
        $($contents[2]).addClass('active');
    });*/
   
    $tabs.each(function(i, tab){
        var $tab = $(tab);
        var $content = $($contents[i]);
        //This is a closure
        $tab.click(function(){
            $tabs.removeClass('active');
            $tab.addClass('active');
            $contents.removeClass('active');
            $content.addClass('active');        
        })
    })
    
    // Set initial state
    $tabs.first().addClass('active');
    $contents.first().addClass('active');
    
});