Cacher is the code snippet organizer for pro developers

# The Panel Toggler
panelToggler = ( $parent, $child ) ->
  $($parent).on 'click', $child, ->
    dataLink = $(@).data 'link'
    dataTarget = $('[data-target="' + dataLink + '"]')
    notTarget = $('[data-target]').filter(->
      $(@).data 'target' isnt dataLink
    )
    $(@).toggleClass 'active'
    $(@).siblings().removeClass 'active'
    dataTarget.toggle()
    dataTarget.toggleClass 'active-target'
    notTarget.hide()
 
# Put it to use
panelToggler '#menu', 'li'

<style>
  [data-target] {
    display: none;
  }
</style>

<nav>
  <ul id="menu">
    <li data-link="panel-1">Panel One</li>
    <li data-link="panel-2">Panel Two</li>
    <li data-link="panel-3">Panel Three</li>
  </ul>
</nav>

<section>
  <div data-target="panel-1">
    <p>Your panel 1 content here.</p>
  </div>
  <div data-target="panel-2">
    <p>Your panel 2 content here.</p>
  </div>
  <div data-target="panel-3">
    <p>Your panel 3 content here.</p>
  </div>
</section>