Accordion with multiple links

Question

I'm taking this CSS-Tricks article and converting it to a UL > LI instead of a DT > DD approach. I just want the pink box to reveal the sub-links when clicked.

For some reason though I cannot get it working. I've created a jsFiddle of it here (click the pink box):

//Accordion
	(function($) {
	    
	  var allPanels = $('ul.sub-level').hide();
	    
	  $('.click-me').click(function() {
	    allPanels.slideUp();
	    alert('slide up');
        // Problem line  
	    $(this).parent().next().slideDown();
	    return false;
	  });
	
	})(jQuery);

ul { list-style: none; padding:0; margin:0; width: 400px; }
ul li { position:relative; background: #fafafa; margin-bottom:3px; height:20px; }
ul li > ul { margin-left: 30px; background: #e3e3e3; }

.click-me {  display:block; width: 20px; height: 20px; position: absolute; top:0; right:0; background: #e4f; cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">Link somewhere</a></li>
    <li><a href="#">Link somewhere</a></li>
    <li class="test">
        <a href="http://google.com">Link somewhere</a>
        
        <!-- I want to reveal accordion using this span tag -->
        <span class="click-me"></span>
        <!-- /end -->
        
        <ul class="sub-level">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
      <li><a href="#">Link somewhere</a></li>
    </li>
</ul>

http://jsfiddle.net/ndczc728/1/

The problem line is this (I think):

// Problem line  
$(this).parent().next().slideDown();

Anyone?

Answer 1

You don't need to use parent. Also you have to remove fixed height from li elements:

//Accordion
(function($) {

  var allPanels = $('ul.sub-level').hide();

  $('.click-me').click(function() {
    allPanels.slideUp();
    // Problem line  
    $(this).next().slideDown();
    return false;
  });

})(jQuery);

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 400px;
}
ul li {
  position: relative;
  background: #fafafa;
  margin-bottom: 3px;
}
ul li > ul {
  margin-left: 30px;
  background: #e3e3e3;
}
.click-me {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  background: #e4f;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Link somewhere</a>
  </li>
  <li><a href="#">Link somewhere</a>
  </li>
  <li class="test">
    <a href="http://google.com">Link somewhere</a>

    <!-- I want to reveal accordion using this span tag -->
    <span class="click-me"></span>
    <!-- /end -->

    <ul class="sub-level">
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
    </ul>
    <li><a href="#">Link somewhere</a>
    </li>
  </li>
</ul>