I found this great example on Stack Overflow that demonstrates Jquery Show/Hide functionality when hovering over links. It works perfectly by showing the content of the next div when the corresponding link is hovered over.
However, I'm facing an issue where I also want to create an active state for the links upon mouseover and fade out the active state when a new link is hovered over.
The challenge lies in the fact that the active state is controlled by an ID instead of a class. Is there a way to achieve this?
Currently, my script looks like this:
$('div.animalcontent').hide();
$('div').hide();
$('a.animal').bind('mouseover', function() {
$('div.animalcontent').fadeOut();
$('#'+$(this).attr('id')+'content').fadeIn();
});
Here are my link structures:
<a href="dogcontent" class='animal' id='dog'>Dog</a>
<a href="catcontent" class='animal' id='cat'>Cat</a>
<a href="snakecontent" class='animal' id='snake'>Snake</a>
Controlling these divs:
<div id='dogcontent' class='animalcontent'>Some dog content</div>
<div id='catcontent' class='animalcontent'>Some cat content</div>
<div id='snakecontent' class='animalcontent'>Some snake content</div>
The CSS styling for highlighting the Active state is limited to using:
a#dog:active,
a#cat:active
a#snake:active
Dealing with the various IDs is a bit challenging for me at the moment. Can you assist with simplifying this process?