How to associate (reference) a button with a div?

This site is best viewed in a modern browser with JavaScript enabled.

How to associate (reference) a button with a div?

handcraftedweb

I'm making a standard hierarchy (or tree) control in which any node with children will have a button to hide/show subnodes. So I'd like to have some way to associate the button with the div that it hides/shows. With code sort of like this:

$(".hideShow").click (function () {
  var $subject = [B][U]getHideShowSubject[/U][/B] (this);
  $subject.toggle();
  toggleHideShowSymbol (this);
});

The getHideShowSubject function would need to access an encoding of a pointer from the button to the subject div (in html).

Is there a conventional way to encode that pointer in HTML? One way to do it would be with HTML5 custom attributes, but what was the convention before HTML5?

zitemediauser

Hi,

If I understand you correctly, take a look a the code I created and tell me if that's what you meant.

  

.divs {
  display: none;

}

<div class="item">
    <button>click 2</button>
    <div class="divs">
      <p>Testing 1</p>
      <p>Testing 2</p>
    </div>
  </div>

  <div class="item">
    <button>click 2</button>
    <div class="divs">
      <p>Testing 3</p>
      <p>Testing 3</p>
    </div>
  </div>

$('.item > button').each(function() {
  $(this).click(function() {
    $(this).next('.divs').slideToggle();
  });
});

Cheers,
Zitemedia

handcraftedweb

Yes, I think that will do it. Using .next with the right selector will do it.

Thanks.

ReFreezed

zitemediauser;1233677 wrote:
$('.item > button').each(function() {
  $(this).click(function() {
    $(this).next('.divs').slideToggle();
  });
});

This could be a bit more optimized:

$('.item > button').click(function() {
    $(this).next('.divs').slideToggle();
});

handcraftedweb

In my case the subject wasn't the immediately next sibling but this worked:

$control.nextAll(".subnav:first").slideToggle(toggleDuration);