Question

I have this mark-up:

<b class="learn more">
Learn more <span class="closedTriangle">&#x25BA;</span><span class="openTriangle">&#x25BC;</span>
</b>

and this jquery:

$('.learnMore').click(function() {
    $(this).next().slideToggle('fast');
    $('.learnMore + .closedTriangle').toggle();
    $('.learnMore + .openTriangle').toggle();
});

I’ve tried wrapping the selector with $(this), but I see the mark-up is not in this context.

I was trying to use and adjacent selector but I’m not winning yet. I am trying to toggle the show/hide between the arrows but only within the specific context. I have numerous “learn More”‘s around the page so just selecting the classes would affect all of them on the page

Answer 1

demo jsBin

• You had a typo in HTML (class name)
• and inside the jQuery just reference to this parent like: $('YourChildrenElementOf', this)

HTML:

  <b class="learnMore">  <!-- FIXED CLASS NAME TYPO -->
Learn more <span class="closedTriangle">&#x25BA;</span><span class="openTriangle">&#x25BC;</span>
</b>

jQuery:

$('.learnMore').click(function() {
    $('span', this).toggle();
});