On my webpage's splash page, there are 4 divs but only the home div is initially visible. The other three are hidden.
Each of these divs has a button associated with it that triggers a jquery click event to swap out the currently visible div for the one selected by the user.
Currently, each button has its own jquery click event hardcoded with the names of the old and new divs to handle the visibility change. This feels redundant and unnecessary.
I am looking to streamline this process by creating a single jquery click-event that dynamically accepts two string variables representing the old div (to hide) and the new div (to show). These variables will be stored in each html button element.
However, I am not sure how to achieve this syntactically.
<div id="homeDiv">HOME PAGE CONTENT</div>
<div id="contactDiv">CONTACT CONTENT</div>
<div id="resumeDiv">RESUME CONTENT</div>
<div id="portfolioDiv">PORTFOLIO CONTENT</div>
<script>
$('#contactButton').click(function() {
$('#homePage').addClass('blur-out-expand-fwd');
setTimeout(function() {
$('#homePage').hide();
$('#contactPage').show();
$('#contactPage').addClass('focus-in-contract-bck');
}, 500);
});
$('#contactHomeButton').click(function() {
$('#contactPage').addClass('blur-out-expand-fwd');
setTimeout(function() {
$('#contactPage').hide();
$('#homePage').show();
$('#homePage').addClass('focus-in-contract-bck');
}, 500);
});
</script>