Question

I have a structure;

<p class = "foo">"sometext"</p>
<div class = "foo">
   <p class = "moo">"sometext"</p>
   <div class = "moo">
      <p class = "boo">"sometext"</p>
      <div class = "boo">
      </div>
  </div>
</div>

And from that structure i create a menu, when i click on the paragraph the corresponding div will show.

 $("p").click(function()
      {
          $(this).next("div").toggle(); 
                     #Code that adds a minus sign before the paragraph eg. "+Mylink to "-Mylink"
       });

I im now trying to get a ‘+’ sign if the menu is not pressed and ‘-‘ if not. The problem i have encounterd is a way of getting to know how to skip the the last step (class boo), it wont be needing any extra sign (it is not a menu). Any easy way traverse throught the structure and to add the plus-sign? Is there any easy way of getting the click function to know its expanded/de-expanded?

Answer 1

You can use the :has() selector to check for siblings:

$('div:not(:has(*))').each(function() {
  $(this).prepend('-');
});

This should work:

$('p').prepend('<span class="toggle">-</span>');

$("p").click(function() {
  var sign = $(this).siblings('.toggle');

  $(this).next("div").toggle();

  if (sign.text() == '+') {
    sign.text('-');
  } else {
    sign.text('+');
  }
});