1

I want to show some information when hitting a link as you can find here: http://jsfiddle.net/t4f8yer0/1/

html:

<a href="#" class="more">show more</a> <br>
<div class="toggle">
this is more
</div>

js:

$(document).ready(function(){
  $(".toggle").css('display','none');

  $( ".more" ).click(function() {
    $(event.target).next().next().toggle( "slow" );
  });
});

This works for chrome and IE edge but not for IE9 or IE10. Is there a solution to this problem?

1
  • Thanks Woodsy, j08691 and Ted!
    – Kekzus
    Apr 30, 2015 at 6:25

3 Answers 3

1

Instead of:

$(event.target);

use:

$(this);

jsFiddle example

Different versions of IE have issues that jQuery normalizes, such as what you're seeing with event.target.

1

I changed your code to reference the toggle div class and it seems to be working.

$(document).ready(function(){
    $(".toggle").css('display','none');

    $( ".more" ).click(function() {
        $(".toggle").toggle("slow");
    });
});
1
  • This works but the probem is that if you have more than one such element it will have effect on all of the other as well. Therefore this is not the perfect solution.
    – Kekzus
    Apr 30, 2015 at 13:21
1

For this HTML:

<a href="#" class="more" data-target="#more1">show more</a> <br>
<div id="more1" class="toggle" style="display:none;">
    this is more
</div>

This JS:

$(document).ready(function(){
    $( ".more" ).click(function() {
        var tgt = $(this).attr('data-target');
        $(tgt).toggle( "slow" );
    });
});

This allows you to set a target for toggling. See it work here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.