title: Make span inside <li> clickable with Treeview.js
body: <p>I have a destination list where I use <strong><a href="https://www.jqueryscript.net/demo/Smoot-Collapsible-Tree-View-Plugin-with-jQuery-TreeViewJS/" rel="nofollow noreferrer">treeview.js</a></strong>. I have added a <code>&lt;span&gt;&lt;/span&gt;</code> tag inside <code>&lt;li&gt;&lt;/li&gt;</code> and tweaked a little CSS to make it look nicer. My goal is to expand the list by clicking the <code>&lt;span&gt;&lt;/span&gt;</code> tags. However, no matter what I do, I can't make the <code>&lt;span&gt;&lt;/span&gt;</code> tag clickable.</p>
  
  <p>I've tried adding <code>display:block;</code> and <code>display:inline-block;</code> while adding the width and height but nothing's working.</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>    #tree li&gt;span {
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border:1px solid #999;
      border-radius:5px;
      display:inline-block;
      padding:0px 6px;
      text-decoration:none;
      line-height: 22px;
      width: 40%;
      padding-left:20px;
      }
  
      /* TreeJS styling */
  
      .treeview, .treeview ul {
      list-style-type: none;
      overflow: hidden;
      }
  
      .treeview li {
      text-indent: 1%;
      margin-top:0.2em;
      padding:0.15em 0 0.5em 1.5em;
      line-height: 22px;
      background-repeat:no-repeat;
      background-size: 24px 24px;
      }
  
      .treeview li.contains-items {
      /*background-image: url('icons/arrow-left.png');*/
      } 
  
     .treeview li.contains-items:before {
      content:"\e081" !important;
      font-family:"Glyphicons Halflings";
      line-height:0.5;
      margin:10px;
      display:inline-block;
      margin-left: 0px !important;
      padding-left: 5px;
      }
  
      .treeview li.items-expanded:before {
      content:"\e082" !important;
      font-family:"Glyphicons Halflings";
      line-height:0.5;
      margin:10px;
      display:inline-block;
      margin-left: 0px !important;
      padding-left: 5px;
      }
  
      .treeview li.items-expanded {
      /*background-image: url('icons/arrow-down.png');*/
     }
  
  .treeview&gt;li:hover {
  cursor: pointer;
  background-size: 24px 24px;
  }
  
  .treeview span.has-node-icon {
  text-indent: 2%;
  margin-top:0.2em;
  padding:0.15em 0 0.5em 2.0em;
  line-height: 22px;
  background-repeat:no-repeat;
  background-size: 24px 24px;
  }
  
  .treeview span:not(span.has-node-icon):hover{
  background-color: rgba(246, 246, 246, 0.7);
  }
  </code></pre>
  
  <p>No changes were made in the js file of treeview.</p>
  
  <p>This might seem like an 'easy' question but I've been working on it for hours now<a href="https://i.stack.imgur.com/FR8hS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FR8hS.jpg" alt="enter image description here"></a>.</p>
  
  <p><strong>EDIT:</strong>
  I have created a simple <strong><a href="https://jsfiddle.net/w1b1s7mq/11/" rel="nofollow noreferrer">jsfiddle</a></strong>.
  But you can also see it in action <strong><a href="http://test.forexcargo.us/apps/oss/calculator" rel="nofollow noreferrer">here</a></strong>.</p>
  
  <p>Any help is highly appreciated. Thank you very much!</p>