hover + click function

Okay so I tweaked it a little bit, added the link to where it needs to go to the href and moved the hover element to an id in the anchor tag.
<div class="item-category">
<ul>            
<li><a href="/node/3" id="#subcat-3">Item 1</a></li>
<li><a href="/node/4" id="#subcat-4">Item 2</a></li>
</ul>
</div>
however after I hover the text is gone and wont come back

<div id="subcat-3" class="subcat-details active">
        <h5><a href="/node/3">Item 1</a> </h5>
        <p>blah blah blah blah</p>
        <p>blah blah blah blah</p>      
</div><!--/subcat-details-->
<div id="subcat-4" class="subcat-details "> 
        <h5><a href="/node/4">Item 2</a> </h5>
        <p>blah blah blah blah</p>      
        <p>blah blah blah blah</p>      
</div>

$(function(){
	$('.item-category ul li a').hover(function(){
		var target = $(this).attr('id');
		
		if($(target).hasClass('active'))
			return false;
		
		$('.subcat-details.active').fadeOut('fast',function(){
			$(this).removeClass('active');
			$(target).fadeIn('fast').addClass('active');
		});
		return false;
	});
});

Select allOpen in new window

I would think

$('.item-category ul li a')
             .click(function(){
               }
              )
             .hover(function(){
		var target = $(this).attr('id');
		
		if($(target).hasClass('active'))
			return false;
		
		$('.subcat-details.active').fadeOut('fast',function(){
			$(this).removeClass('active');
			$(target).fadeIn('fast').addClass('active');
		});
		return false;
	});

Select allOpen in new window

This code does not make sense

var target = $(this).attr('id');
            
            if($(target).hasClass('active'))

it should just be

if($(this).hasClass('active'))

Same for the fadin part

not sure how to add the fade in part.

Not sure either since it does not really look right to me

Perhaps this is what you mean

var currentActive = ""; // could be home or whatever is the avtive ID at load
$('.item-category ul li a').click(function(){
    if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
    $(this).addClass('active');
    currentActive = $(this).attr("id"); // save
  }).hover(function(){
  // do not activate the fade on hover on the currently selected link
    if(!$(this).hasClass('active')) {
      $('.subcat-details.active').fadeOut('fast',function(){
      $(this).fadeIn('fast');
    }
    return false; // not sure about this one
  });

the rollover portion isnt working.  not sure why

Do you have a url?

http://tinyurl.com/4pjs38l

I am not sure but you want to show new contents when the user hover on the link and bring them to another page when clicked?

Missed a bracket


var currentActive = ""; // could be home or whatever is the avtive ID at load
$('.item-category ul li a').click(function(){
    if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
    $(this).addClass('active');
    currentActive = $(this).attr("id"); // save
  }).hover(function(){
  // do not activate the fade on hover on the currently selected link
    if(!$(this).hasClass('active')) {
      $('.subcat-details.active').fadeOut('fast',function(){
        $(this).fadeIn('fast');
      });
    }
    return false; // not sure about this one
  });

its still not switching the content when I hover.

You are not calling the code

I'm sorry I am being dense I am not sure how I am not calling it.

You need to invoke it

var currentActive = ""; // could be home or whatever is the avtive ID at load
$(document).ready(function() {
  $('.item-category ul li a').click(function(){
      if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
      $(this).addClass('active');
      currentActive = $(this).attr("id"); // save
    }).hover(function(){
    // do not activate the fade on hover on the currently selected link
      if(!$(this).hasClass('active')) {
        $('.subcat-details.active').fadeOut('fast',function(){
          $(this).fadeIn('fast');
        });
      }
      return false; // not sure about this one
    });
});

Alright so I can see the fade working but its not changing the text just fading to the same text.  lol

Right.

It does not help that the div content is actually both the same :)

Try
          $("#"this).fadeIn('fast');
instead of

          $("#"+this.id.substring(1)).fadeIn('fast');

var currentActive = ""; // could be home or whatever is the avtive ID at load
$(document).ready(function() {
  $('.item-category ul li a').click(function(){
      if (currentActive) $("#"+currentActive).removeClass('active'); // remove the previous link's class
      $(this).addClass('active');
      currentActive = $(this).attr("id"); // save
    }).hover(function(){
    // do not activate the fade on hover on the currently selected link
      if(!$(this).hasClass('active')) {
        $('.subcat-details.active').fadeOut('fast',function(){
          $("#"+this.id.substring(1)).fadeIn('fast'); // the id of the link is #subcat-x
        });
      }
      return false; // not sure about this one
    });
});

Select allOpen in new window

The title is different the body text is the same

I still dont get why its not switching .. the title should at least be chaning

I think I need to try it at home

any luck?

Sorry - will look in 2 hours

I will try the code.  I need the click to go to the next page, I need the hover to display information about what they are going to see on the next page.  Sorry for any confusion.

that did it!  I didnt need the 2nd set of code.  :D

Great. The amount of code to make the click sticky confused me

In the end it  wasnt necessary since I moved the link into the href part.  lol

Thanks for you patience

You are welcome. Made me learn some more jQuery in the process