I am looking to display 3 sections in a simple, paginated way that mimics tabs. I am trying to implement the logic where when a pagination item is clicked and has the 'active' class, it should show the corresponding block. However, I am struggling with the JavaScript part of this.
This is my HTML:
<ul class="pagination">
<li class="first active">1</li>
<li class="second">2</li>
<li class="third">3</li>
</ul>
<div class="block first">page 1</div>
<div class="block second">page 2</div>
<div class="block third">page 3</div>
And here is the JavaScript code:
$(".pagination li").click(function () {
$(this).toggleClass('active').siblings().removeClass('active');
});
if ($(".pagination li.first").hasClass("active")) {
$(".block.first").css("display" , "block");
}
else if ($(".pagination li.second").hasClass("active")) {
$(".block.second").css("display" , "block");
}
You can access the fiddle for this setup here: http://jsfiddle.net/p2e4nd97/1/
The 'if' statement seems to be working, but the 'elseif' section is not. It feels like there might be a more concise way to achieve this. Can anyone provide guidance? Thank you!