Tabbed Panels

by Aaron Kahlhamer

HTML

<a href="#js-panel1" class="js-toggle link--styles">Upright Product Guide</a>         
	                 
<a href="#js-panel2" class="js-toggle link--styles">Cordless Product Guide</a>
	             
<a href="#js-panel3" class="js-toggle link--styles">Fan &amp; Heater Product Guide</a>
	             

<div class="js-panel1 js-panel panel--styles">
    <img src="http://placehold.it/985x150" alt="" />
</div>

<div class="js-panel2 js-panel panel--styles">
    <img src="http://placehold.it/985x350" alt="" />
</div>

<div class="js-panel3 js-panel panel--styles">
    <img src="http://placehold.it/985x550" alt="" />
</div>

CSS

/*==============================================
    tabbed panels - do not style
===============================================*/

.js-panel {
    opacity:0;
    position: absolute;
    -moz-transition: opacity 0s, z-index 0 1s;
    -o-transition: opacity 0s, z-index 0 1s;
    -webkit-transition: opacity 0s, z-index 0 1s;
    transition: opacity 0s, z-index 0 1s;
    z-index: -1000;
}

.js-animation {
    opacity:1;
    position:relative;
    z-index: 1000;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s
}


/*==============================================
    tabbed panels
    style to your heart's desire
===============================================*/

/* :: links :: */
.link--styles {
    margin:10px;
    padding:10px;
}

.panel--styles {
    
}

JavaScript

(function($) {

////////////////////////////////////////////////////////
//////////////////// TOGGLE PANELS /////////////////////
////////////////////////////////////////////////////////



var $jsToggle       = $('.js-toggle'),
    allPanels       = new Array(), // empty array
    panelID,
    removePanel;


// when page loads find all hrefs using the class of .js-toggle 
// using push, update the empty array for later use
// replace hash with a period to make it look like a class selector
$jsToggle.each(function(){
  allPanels.push($(this).attr('href').replace(/^#/, '.'));
});


function togglePanels(e) {
   
    // make sure the href doesn't appear in the address bar
    e.preventDefault();


    // save the value of the href as a variable
    var panelID = $(this).attr('href').replace(/^#/, '.');
    

    // remove the current panel from the allPanels array
    removePanel = allPanels;

    
    removePanel = $.grep(removePanel, function(value) {
      return value != panelID;
    });

    
    // close all other panels
    $(removePanel.join(", ")).removeClass('js-animation');

    
    // toggle the panel
    $(panelID).toggleClass('js-animation');


}

    

$jsToggle.on('click', togglePanels);



})(jQuery);