tags:

views:

33

answers:

1

Hello all.

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!

+1  A: 

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();
    });
Gaby
+1 for beautiful solution!
MvanGeest
Am I doing this incorrectly if I wanted to have the next UL cover the parent UL, then be able to go back to the parent with a click?
buildakicker
@buildakicker, with a click where ?
Gaby
@Gaby, for example, your function closes the Yes or No depending on which one is clicked. If I clicked on "Are you using Linux" I would get both Yes and No again. because I changed my mind, "oh, I am using Linux, so Yes, rather than no." Is that kinda clear? :)I guess I would like to step back one in reality. I am not clear, why I cannot just do something like: $('.back').click( function(){ $(this).prev('ul').show('fast');});where the previous li has the class of back on it. Is that not how it works?Thanks again!http://jsfiddle.net/MxgpT/
buildakicker
@buildakicker, Have a look at these changes at http://jsfiddle.net/MxgpT/2/ you need to click on the question text to go back to that question..
Gaby
@Gaby, thanks again! I tried everything I could think of, but I obviously don't have a clue. I don't really get the logic here: $('ul li').click(function(e){ $(this).siblings().show().find('ul').hide(); e.stopPropagation(); //forbid parent li from processing the event});Why the show.find.hide?
buildakicker
@buildakicker, **show** the siblings (*the yes/no elements*) then **find** the `ul` that belongs to those answers and **hide** them (*so that you start fresh and do not continue to see your previous answers down the hierarchy..*). makes any more sense now ?
Gaby
Yes, I think I get it. I am just starting to figure out the jQuery logic. lol. Thanks again!
buildakicker