JSFiddle - React, Tailwind, and code Playground
HTML
<div class="prod_matrix block" id="0">0</div>
<div class="prod_matrix none" id="1">1</div>
<div class="prod_matrix none" id="2">2</div>
<div class="prod_matrix none" id="3">3</div>
<div class="prod_matrix none" id="4">4</div>
<div class="prod_matrix none" id="5">5</div>
<div class="prod_matrix none" id="6">6</div>
<div class="prod_matrix none" id="7">7</div>
<div class="button_nav_tab left single_line_tab green_grad btm_cat" id="0">0</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="1">1</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="2">2</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="3">3</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="4">4</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="5">5</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="6">6</div>
<div class="button_nav_tab left single_line_tab grey_grad btm_cat" id="7">7</div>
<div class="another_element">Click</div>
<!-- please excuse messy markup, still in progress -->
CSS
.block {
display:block;
}
.none {
display:none;
}
div {
width:80px;
height:50px;
cursor:pointer;
background:green;
}
div.prod_matrix {
background:blue;
}
JavaScript
$(document).ready(function() {
function change_btm_cat(item) {
$('div.prod_matrix').removeClass('block');
$('div.prod_matrix').addClass('none');
$('div.prod_matrix#' + item.attr('id')).removeClass('none');
$('div.prod_matrix#' + item.attr('id')).addClass('block');
$('div.btm_cat').removeClass('green_grad');
$('div.btm_cat').addClass('grey_grad');
item.removeClass('grey_grad');
item.addClass('green_grad');
}
$('div.btm_cat').click(function() {
change_btm_cat($(this));
});
$('div.another_element').live('click', function() {
change_btm_cat($('div.btm_cat#7'));
});
//please excuse messyness, still in progres
});