Grid With Main Stage Hot Load

by Elijah Tate

HTML

<div class="grid">
    <div class="thumb" data-number="1">
    
    </div>    
    <div class="thumb" data-number="2">
    
    </div>  
    <div class="thumb" data-number="3">
    
    </div>  
    <div class="thumb" data-number="4">
    
    </div>  
    <div id="1" class="mainStage">
    1
    </div>
    <div id="2" class="mainStage">
    2
    </div>
    <div id="3" class="mainStage">
    3
    </div>
    <div id="4" class="mainStage">
    4
    </div>
    
    <br>
    
    <div class="thumb" data-number="5">
    
    </div>    
    <div class="thumb" data-number="6">
    
    </div>  
    <div class="thumb" data-number="7">
    
    </div>  
    <div class="thumb" data-number="8">
    
    </div>  
    <div id="5" class="mainStage">
    5
    </div>
    <div id="6" class="mainStage">
    6
    </div>
    <div id="7" class="mainStage">
    7
    </div>
    <div id="8" class="mainStage">
    8
    </div>
</div>

CSS

.thumb {
  width: 30px;
  height: 30px;
  background: black;
  display:inline-block;
}

.mainStage {
  display: none;
  height: 100px;
  width: 100%;
  background: gray;
}

JavaScript

function addHandlers(){
	$(".thumb").each(function(indx, el){
  	$(this).click(function(){
    	var isVisible = $thisStage.is(":visible");
    	$(".mainStage").hide();
    	var stageID = $(this).attr("data-number");
			var $thisStage = $("#" + stageID);
      if( isVisible === true){
      	$thisStage.toggle;
      } else {
      	$thisStage.show();
      }
    });
  });
}

addHandlers();