I’m trying to use jQuery’s toggle class to show a div (class=“beer-info”) based on a which li item was clicked. onClick I want to hide the current .beer-info div and display the one clicked.
Here is what I have so far:
<ul class="list-unstyled beer-menu">
<li><a data-beer="beer1" href="">Beer 1</a> </li>
<li><a data-beer="beer2" href="">Beer 2</a> </li>
<li><a data-beer="beer3" href="">Beer 3</a> </li>
</ul>
<div class="beer-info" id="beer1">...</div><!-- close beer info -->
<div class="beer-info" id="beer2">...</div><!-- close beer info -->
<div class="beer-info" id="beer3">...</div><!-- close beer info -->
javascript:
jQuery(document).ready(function() {
$('.beer-menu li a').click(function() {
// get id of li clicked
var beerId = '#' + $(this).attr("data-beerId");
alert(beerId);
// find id of class with show
// change class from show to hide
//change class of beerId from hidden to show
$(beerId).toggleClass('old_class new_class');
});
});