Question

I am building a simple decision tree with jQuery. I have it running ok, but I would like to add a little more functionality. Currently I have this:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$('ul').hide();

$('h3').css('cursor','pointer');

$('h3').click(function(){
 $('.show').slideToggle('fast');        
});

$('ul li a').click(function(){ 
 $(this).next('ul').slideToggle('fast');
});

});
</script>

<h3 class="parent">Is this computer a Mac?</h3>
<ul class="show">
  <li>Does this computer have Windows?</li>
  <li><a href="#"><strong>YES</strong></a>
    <ul>
      <li>Do you use Chrome?</li>
      <li><a href="#"><strong>YES</strong></a>
        <ul>
          <li>Do you like it?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great, Keep Using It!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Try Firefox Maybe... </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><strong>NO</strong></a>
        <ul>
          <li> You should try it.</li>
        </ul>
      </li>
    </ul>
</li>
  <li><a href="#"><strong>NO</strong></a>
    <ul>
      <li>Are you using Linux?</li>
      <li><a href="#"><strong>YES</strong></a>
        <ul>
          <li>Do You Like it?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Too Bad...</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><strong>NO</strong></a>
        <ul>
          <li>Have You Heard of Linux?</li>
          <li><a href="#"><strong>YES</strong></a>
            <ul>
              <li>Great!</li>
            </ul>
          </li>
          <li><a href="#"><strong>NO</strong></a>
            <ul>
              <li>Check it out online!</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

For example what I would like to have happen is, when the user clicks on the YES, the NO option disappears… This happens each time the user clicks the YES selection. This would be the opposite with NO, the YES would disappear.

I have tried some things such as .next().hide(), replaceWith(), etc… but I cannot get it working. I was thinking Siblings() would be the choice, but that failed right away…

Any advice?

Thanks a bunch!

Answer 1

Siblings is the right Idea, but you need to first go back to the li element as you want to hide its siblings and not of the a element..

Here is a working example : http://www.jsfiddle.net/MxgpT/

i just add to your code this

$('a').click( function(){
    $(this).closest('li').siblings(':not(:first-child)').hide();
    });