Is there a way to make it so that only the "pastInvestments" are displayed when the "pastButton" is clicked, and only the "currentInvestments" are displayed when the "currentButton" is clicked?
In the HTML code below, there are 2 buttons and 2 divs:
<button class="w3-button currentButton">Current</button>
<button class="w3-button pastButton">Past</button>
<div class="currentInvestments">
//images inside div
</div>
<div class="pastInvestments">
//images inside div
</div>
By default, I want the "pastInvestments" div to be hidden when the page loads. When the "pastButton" is clicked, only the images in the "pastInvestments" div should be displayed. Currently, clicking on the "pastButton" hides both the "pastInvestments" and "currentInvestments" divs.
Below is the jQuery code I am using:
$(function() {
$('.pastInvestments').hide();
$('.currentButton').click(function(){
$('.currentInvestments').show();
$('.pastInvestments').hide();
});
$('.pastButton').click(function(){
$('.currentInvestments').hide();
$('.pastInvestments').show();
});
});