title: javascript code executing both if and else blocks
body: <p>I'm trying to get achieve a drilldown list kind of functionality. </p>
  
  <p>The code runs fine with the <code>.toggle()</code>, but my drill-down list items are coming from an AJAX request, so I tried to write a basic custom toggle on the <code>.live('click')</code> event. </p>
  
  <p>The problem now is that the code is executing in both the <code>if</code> and <code>else</code> blocks.</p>
  
  <p>My javascript code as below:</p>
  
  <pre><code>$(document).ready(function(){
      var $drillDownListItem = $("li.listItem");
      var flag = 0;
  
      var options = {
          $this: ""
      };
  
      $drillDownListItem.live('click', function() {
          options.$this = $(this);
          if(!$(this).children("ul").is(":visible"))
          {
              showChildren(options);
          }
          else
          { 
              hideChildren(options);
          }
      });
  
      $drillDownListItem.each(function() {
          if ($(this).children("ul").length &gt; 0) {
              $(this).css({
                  "padding-bottom": "0px"
              });
              $(this).children("ul").hide();
              $(this).children("span:first-child").css({
                  "padding-bottom": "11px"
              });
          }
      });
  });
  
  var showChildren = function(options) {
      if (options.$this.children("ul").length &gt; 0) {
          options.$this.css("background-image", "url(./images/dropDownDown.png)");
          options.$this.children("ul").slideDown(500);
          //options.$this.children("span:first-child").css({"padding-bottom": "6px", "float": "left"});
      }
  }
  var hideChildren = function(options) {
      if (options.$this.children("ul").length &gt; 0) {
          options.$this.css("background-image", "url(./images/sideArrow.png)");
          options.$this.children("ul").slideUp(500);
          //options.$this.children("span:first-child").css({"padding-bottom": "6px", "float": "left"});
      }
  }
  </code></pre>
  
  <p>Have no idea why this is happening, while debugging however, </p>
  
  <p>once the <code>if</code> block (<code>showChildren()</code>) is done executing, the control jumps into the <code>else</code> block (<code>hideChildren()</code>) and the value of <code>$(this)</code> is changed to the parent.</p>