title: Two OnClick events overlap
body: <p>I have an element inside an element, when I click the element underneath I want the slider to open. When I click on the outermost element I want the slider to close. </p>
  
  <p>Unfortunately when I click on the outermost it clicks the underneath element as well. Is there a way to click only on the outermost element ignoring the click on the underneath element? The events are triggered on click and executed with javascript.</p>
  
  <p>I tried with <code>z-index</code> but it still captures the underneath element clicked as well, and because the functions are contrary to one another nothing happens.</p>
  
  <p>edit: on a "code is worth 1000 words" tip</p>
  
  <pre><code>var $target = $(this).data('pos', i) //give each li an index #
      $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
      $target[haccordion.ismobile? "click" : "mouseenter"](function(){
          haccordion.expandli(config.accordionid, this)
          config.$lastexpanded=$(this)
      })
  
      if (config.collapsecurrent){ //if previous content should be contracted when expanding current
          $('.close').click(function(){
              $target.stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
          })
          $target.dblclick(function(){
              $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
          })
      }
  </code></pre>
  
  <p><code>Because the code is borrowed</code>, I don't understand much of it. But basically I want the "<code>click</code>" : "<code>mousteente</code>r" function to work on click, without interfering with the .close().click</p>