A problem I encountered with my website involves a menu that toggles content visibility based on menu item clicks. The JQuery script responsible for this behavior is shown below:
$(document).ready(function() {
$("#bioLink").click(function(){
$("#about").show(1000);
$("#portfolio, #contact, #expand").hide(1000);
}); // end bio-click
$("#portfolioLink").click(function(){
$("#portfolio").show(1000);
$("#about, #contact, #expand").hide(1000);
}); // end portfolio-click
$("#contactLink").click(function(){
$("#contact").show(1000);
$("#about, #portfolio, #expand").hide(1000);
}); // end contact-click
}); // end ready
Previously, all content was hidden when the page loaded using the following CSS rule:
#about, #portfolio, #contact {
display:none;
}
This CSS rule now causes issues with a carousel that I recently added to the portfolio section of the site.
I am wondering if there is a way to modify the script to hide the content upon loading without affecting the carousel. This could be a viable solution as long as the existing functionality remains intact.