Jquery Issue for fade

Question

This might look simple issue.But I could not find out after spending nearly 5 hrs. I have the following html element inside <c:foreach>

<a href="#" class="helpTip1" id="removeId">
                        <span id="helptext1" class="help_txt1">
                        <span class="help_txt1"  id="helptxtContent">
                                help text goes here                         </span>
            </span>
           </a>

Then I have the following jquery.

var hide = false;
 $(document).ready(function () {

$("#removeId").click(function(){


    if(hide==true){
        $("#helptxt1").fadeIn('slow');
        $("#helptxtContent").fadeIn(function(){hide = false;});

    }
    if(hide==false){
        $("#helptxt1").fadeOut('slow');
        $("#helptxtContent").fadeOut(function(){hide=true;});

    }
});
});

The problem is the helptext getting fade only when I click on the first elelmetn with id=removeid. When I click on second element with (since its inside C:foreach) this jquery doesn't work.

Please help me out.

Answer 1

As you are having multiple duplicate IDs , your click event handler will work only for the first element with that ID i.e #removeId

You need to use class instead of IDs -

<a href="#" class="helpTip1 removeId">
     <span  class="help_txt1 helptext1">
      <span class="help_txt1 helptxtContent"  >
         help text goes here 
      </span>
     </span>
</a>

jQuery -

var hide = false;
$(document).ready(function () {
    $(".removeId").click(function () {
        if (hide == true) {
            $(".helptxt1",this).fadeIn('slow');
            $(".helptxtContent",this).fadeIn(function () {
                hide = false;
            });
        }
        if (hide == false) {
            $(".helptxt1",this).fadeOut('slow');
            $(".helptxtContent",this).fadeOut(function () {
                hide = true;
            });
        }
    });
});

Demo ----> http://jsfiddle.net/4jUmL/

Answer 2

use fadeToggle in jquery();

  $("#removeId").click(function(){

        $("#helptxt1").fadeToggle('slow');
        $("#helptxtContent").fadeToggle('slow');

});