I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function.
This basically involves creating a filter system with four possible options, which are:
- All
- Interactive
- Graphic
- Audio
My goal is to enable a button click to fade out all other options and fade in the relevant content section...
For instance - Clicking on the interactive button should:
"fade out all visible elements, then fade in the interactive one" + "if graphic is visible, fade it out, and then fade in interactive" + "if audio is visible, fade it out, and then fade in interactive"
Thus, covering all bases with a single button click...
I've attempted unsuccessfully to add multiple IDs to the code here:
$(document).ready(function(){
$("#filter-interactive").toggle(function() {
$("#wrapper-thumbnails-all, #wrapper-thumbnails-graphic, #wrapper-thumbnails-audio").fadeOut(function() { $("#wrapper-thumbnails-interactive").fadeIn(); });
}, function() {
$("#wrapper-thumbnails-interactive").fadeOut(function() { $("#wrapper-thumbnails-all").fadeIn(); });
});
});
Here is the simplified HTML structure: Only the ALL Section starts as visible, while all others are initially set to Display:none;
<body>
<div id="wrapper-thumbnails-all">
Content
</div>
<div id="wrapper-thumbnails-interactive">
Content
</div>
<div id="wrapper-thumbnails-graphic">
Content
</div>
<div id="wrapper-thumbnails-audio">
Content
</div>
</body>