I've set up a jQuery function that toggles the visibility of different divs when clicking on folder icons:
$(document).ready(function() {
$("#techfolder").click(function(){
$("#txt").toggleClass("d-none");
});
$("#persfolder").click(function(){
$("#txt2").toggleClass("d-none");
});
$("#linkfolder").click(function(){
$("#txt3").toggleClass("d-none");
});
});
The issue I'm facing is that if one element is visible and another folder icon is clicked without hiding the first element, the newly visible element appears below the first. I want to ensure exclusive visibility for these elements so only one is displayed at a time. I am struggling to find a solution to this.
If anyone can offer some guidance, it would be greatly appreciated!