title: how to trigger javascript function from button
body: <p>i have been downloading bootstrap tree list snippet from google.</p>
  
  <p>it have javascript function which look like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;$(function () {
      $('.tree li').on('click', function (e) {
          var children = $(this).find('&gt; ul &gt; li');
          if (children.is(":visible")) children.hide('fast');
          else children.show('fast');
          e.stopPropagation();
      });
  });&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>because i need the tree list only show the active list, so i need to trigger it from my list, and check whether this list active or not</p>
  
  <p>i had convert it to become like this, but still didnt work</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showHide(){
          var children = $(this).find('&gt; ul &gt; li');
          if (children.is(":visible")) children.hide('fast');
          else children.show('fast');
          e.stopPropagation();
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>and also could you explain to me what is the function of e, in function(e),and e.stopPropagation()</p>
  
  <p>this is the complete code, in case someone was asking</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bootstrap-3.2.0.min.css"&gt;
  &lt;style&gt;
  .tree li {
      margin: 0px 0;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0px 5px;
  }
  .tree li::before {
      content:'';
      position: absolute;
      top: 0;
      width: 1px;
      height: 100%;
      right: auto;
      left: -20px;
      border-left: 1px solid #ccc;
      bottom: 50px;
  }
  .tree li::after {
      content:'';
      position: absolute;
      top: 30px;
      width: 25px;
      height: 20px;
      right: auto;
      left: -20px;
      border-top: 1px solid #ccc;
  }
  .tree li a {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 5px 10px;
      text-decoration: none;
      color: #666;
      font-family: arial, verdana, tahoma;
      font-size: 11px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
  }
  /*Remove connectors before root*/
   .tree &gt; ul &gt; li::before, .tree &gt; ul &gt; li::after {
      border: 0;
  }
  /*Remove connectors after last child*/
   .tree li:last-child::before {
      height: 30px;
  }
  /*Time for some hover effects*/
  
  /*We will apply the hover effect the the lineage of the element also*/
   .tree li a:hover, .tree li a:hover+ul li a {
      background: #c8e4f8;
      color: #000;
      border: 1px solid #94a0b4;
  }
  /*Connector styles on hover*/
   .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
      border-color: #94a0b4;
  }
  &lt;/style&gt;
  &lt;script src="http://snipplicious.com/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="http://snipplicious.com/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;$(function () {
      $('.tree li').on('click', function (e) {
          var children = $(this).find('&gt; ul &gt; li');
          if (children.is(":visible")) children.hide('fast');
          else children.show('fast');
          e.stopPropagation();
      });
  });&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;Bootstrp tree view - click to hide&lt;/h1&gt;
    &lt;div class="tree"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Parent&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;Child&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt; &lt;a href="#"&gt;Grand Child&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;Child&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;Grand Child&lt;/a&gt;
                  &lt;ul&gt;
                    &lt;li&gt; &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
      $num=0;
      if(isset($_GET['number'])){
          $num = $_GET['number'];
      }
  ?&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Simple list&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;ul&gt;
              &lt;li &lt;?php if($num==1) {echo 'class="special"';}?&gt;&gt;
                  one
                  &lt;ul class="sublist"&gt;
                      &lt;li&gt;1&lt;/li&gt;
                      &lt;li&gt;2&lt;/li&gt;
                      &lt;li&gt;3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li &lt;?php if($num==2) {echo 'class="special"';}?&gt;&gt;
                  two
                  &lt;ul class="sublist"&gt;
                      &lt;li&gt;1&lt;/li&gt;
                      &lt;li&gt;2&lt;/li&gt;
                      &lt;li&gt;3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li &lt;?php if($num==3) {echo 'class="special"';}?&gt;&gt;
                  three
                  &lt;ul class="sublist"&gt;
                      &lt;li&gt;1&lt;/li&gt;
                      &lt;li&gt;2&lt;/li&gt;
                      &lt;li&gt;3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li &lt;?php if($num==4) {echo 'class="special"';}?&gt; &gt;
                  four
                  &lt;ul class="sublist"&gt;
                      &lt;li&gt;1&lt;/li&gt;
                      &lt;li&gt;2&lt;/li&gt;
                      &lt;li&gt;3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;script src="http://snipplicious.com/js/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(function(){
                  $('li.special').hide();
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
   this is the simpler code, but method hide didnt work</p>