Decision Tree / Drill Down

buildakicker · 06-30-2010, 11:26 PM

Hello all, I have been working on a drill down menu / decision tree for a bit here with jQuery. I had an easy nice setup done, but it doesn't work the way I'd like it to 100%.

In any case. I am trying to just step through a list. For example:

HTML Code:

<h3>Is the Sky Blue?</h3>
<ul>

<li>YES
 <ul><li>What color of blue?</li></ul></li>

<li>NO
 <ul><li>If not blue, what color is it?</li></ul></li>

</ul>

When someone clicks on Yes, show the Next LI, if they click on No, show the next LI.

I have been trying, with jQuery something like this:

Code:

$('h3').click(function(){
	$(this).next('li').toggle('fast');
});

or

Code:

$('h3').click(function(){
	$('li',this).show();
});

...but cannot get just the next li to show. Any advice?

delayedinsanity · 06-30-2010, 11:39 PM

You're attaching your event handler to the H3 element, when the click should be occuring on one of the two LI elements in your parent unordered list, no?

javascript Code:

$("ul#answers li").click(function() {
         $(this).next("ul").show();
});

Add an element id to the parent UL and try something like the above.

buildakicker · 07-01-2010, 02:43 PM

Yes, that is what I need to do just about. I have multiple nested UL, about 7 deep, so your solution set me in the right direction.

I ended up doing this:

Code:

$(document).ready(function() {
$('ul ul').hide();
	$('ul li a').click(function(){							
		$(this).next('ul').toggle();
	});
});

What I am trying to do now is hide the UL previously clicked on and replace it with the current UL. If you have any thoughts on that, I'd be stoked! I'll post what I come up with.

Thanks again.

buildakicker · 07-01-2010, 05:32 PM

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.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...

delayedinsanity · 07-01-2010, 05:39 PM

You're probably going to want to check out the .parent() and .siblings() methods, though I'm sure there are many ways to accomplish your goal. If you set up multiple divs, uls, or other elements that you wish to use, you might also benefit from something like .replaceWith(), depending on how you wish to go about the process; for a quick and dirty example, see http://pastebin.com/NHEM10s2

delayedinsanity · 07-01-2010, 05:40 PM

Hum, you beat me to the punch while I was writing your example up. I think you're on the right path though, as we both thought of the same methods. I would keep trying, jQuery is pretty intuitive with such operations once you get the first attempt working.