Question

I have a html structure like:

<h3>Attributes (<a class="on_test" href="#">show/hide all</a>)</h3>
<div class="reference_tborder">
<ul class="reference_table">
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">style</a></p>
      <div class="attribute_description" style="display:none;">test1</div>
    </li>
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">type</a></p>
      <div class="attribute_description" style="display:none;">test1</div>
    </li>
</ul></div>

<h3>Attributes (<a class="on_test" href="#">show/hide all</a>)</h3>
<div class="reference_tborder">
<ul class="reference_table">
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">style</a></p>
      <div class="attribute_description" style="display:none;">test2</div>
    </li>
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">type</a></p>
      <div class="attribute_description" style="display:none;">test2</div>
    </li>
</ul></div>

and more like these

and javascript:

<script type="text/javascript">
$(document).ready(function() {
    $('a.on_test').click(function(event) {
        if ($('.attribute_description:first').css("display") == 'block') {
            $("div.attribute_description").css("display", "none");
        }
        else {
            $("div.attribute_description").css("display", "block");
        }
        return false;
    });
});​
</script>

Right now when I click “show/hide all”, the action gets applied to all the divs. I just want to select the first ones under the “show/hide all” I click. Any help to approach solving this problem will be appreciated

Here’s a JSFiddle so you can see the problem http://jsfiddle.net/5mLys/

Answer 1

Looks like you need to do:

$('a.on_test').on('click', function (e) {
    var _nextSection  = $(this).closest('h3').next().find('.reference_table'),
        _descriptions = _nextSection.find('.attribute_description');

    if (_descriptions.first().is(':visible')) {
        _descriptions.hide();
    }
    else {
        _descriptions.show();
    }
    return false;
});

You want to start by grabbing the nearest section, that way you won’t be toggling multiple sections.

Side note: You should probably reconsider your general HTML structure, looks like you have div-itis here.