CODEWITHSUNDEEP
javascriptjqueryhtmlcoffeescripttraversal
Joey Hipolito
Joey Hipolito

Reputation: 3166

Traversing to the element closest to the element clicked jquery

I have this kind of setup in my html

<section class="grp">
  <ul class="normal">
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
  </ul>
  <ul class="advanced">
    <li>This is Advanced</li>
  </ul>
</section>
<h1>Another Thing</h1>
<section class="grp">
  <ul class="normal">
    <li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
  </ul>
  <ul class="advanced">
    <li>This is Advanced</li>
  </ul>
</section>

How can I toggle the "advanced" ul if I clicked the button in ul.normal?

I tried it like this in coffeescript

$('.normal').on 'click', '.toggle-advanced', (e) ->
  $(@).closest('.grp').siblings('.advanced').slideToggle();

Upvotes: 0

Views: 261

Answers (5)

Riri
Riri

Reputation: 11977

This should work.

$("ul.normal>li>button").click(function () {
   $(this).closest('.normal').siblings('.advanced').slideToggle();
});

Working example: http://jsfiddle.net/riri78/dQcFE/

Upvotes: 1

asandeep
asandeep

Reputation: 358

In Jquery, you can use parent and siblings functions to get to the desired element.

Try this:

$('.toggle-advanced').click(function() {
  $('this').parent().siblings().toggleSomething()
});

siblings returns all the siblings for given element, which in your case will always return "advanced" ul.

Upvotes: 1

bipen
bipen

Reputation: 36541

since jquery is tagged... using jquery

$('.toggle-advanced').click(function(){
    $(this).parents('ul.normal').siblings('ul.advanced').toggle();
});

or 

$('.toggle-advanced').click(function(){
    $(this).parents('.grp').find('ul.advanced').toggle();
});

these should work unless you aree adding the content dynamically.. use on() if added dynamically

$('.normal').on('click', '.toggle-advanced', function(){
   $(this).parents('.grp').find('ul.advanced').toggle();
});

Upvotes: 2

muneebShabbir
muneebShabbir

Reputation: 2538

you can try this 

$(".toggle-advanced").on('click', function(){

    $(this).closest(".normal").siblings('.advanced').slideToggle();

});

this code is jquery based

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388396

.advanced is not a sibling of .grp element, it is the sibling of the parent .normal element

$(@).closest('.normal').siblings('.advanced').slideToggle();

The javascript equal will be

$('.normal').on('click', '.toggle-advanced', function(){
    $(this).closest('.normal').siblings('.advanced').slideToggle();
})

Upvotes: 1

Related Questions