jQuery : displaying a div according to which image i clicked on

Question

Hello,

i'm having a trouble to display text according to images i clicked on.

<ul id="boutique1">
      <li><a href="#first"><img src="images/image1.jpg">nothing</a></li>
    </ul>

When i click on these first link, i want to display that :

 <p id="first" style="display:none;">Hello World</p>

Into this div :

<div id="alert"></div>

Now, i have this jQuery function :

$('#boutique1 a').live('click',function(){ 

 $('#alert').html(  $($(this).attr('href')) ).slideDown(); 
    setTimeout(function(){ $('#alert').slideUp() },5000) 

 });

I don't know why it's not working.

I only got the #alert div who is showing up empty

thanks

Answer 1

You can do this:

$('#boutique1_item3 a').live('click',function(){ 
  $('#alert').html( $(this.hash).html()).slideDown()
             .delay(5000).slideUp();
});

You can test it here, they key is that .html(value) takes a string, so you need to call .html() to get the value on the element you're grabbing content from.