Search code examples
jquerylistslidetoggle

Use slideToggle to expand & collapse list items


For a nested list which expands/collapses on click using, how to prevent the "toggle" on the lowest-level item? eg The last item in the list is a hyperlink, but clicking collapses the list rather than opening the link.

jQuery('.intranet ul').hide();

jQuery('.intranet-folder').click(function() {
  jQuery(this).children("ul").slideToggle();
  return false;
});
.intranet-folder {cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="intranet">
  <li class="intranet-folder">Years
    <ul>
      <li class="intranet-folder">2015
        <ul>
          <li class="intranet-folder">January
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
          <li class="intranet-folder">February
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="intranet-folder">2014
        <ul>
          <li class="intranet-folder">November
            <ul>
              <li><a href="#">Click to download file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


Solution

  • For reference, I found an answer at how to make an expandable list.

    $(function prepareList() {
    	$('#expList').find('li:has(ul)').unbind('click').click(function(event) {
    		if(this == event.target) {
    			$(this).toggleClass('expanded');
    			$(this).children('ul').toggle('medium');
    		}
    		return false;
    	}).addClass('collapsed').removeClass('expanded').children('ul').hide();
     
    	//Hack to add links inside the cv
    	$('#expList a').unbind('click').click(function() {
    		window.open($(this).attr('href'));
    		return false;
    	});
    	//Create the button functionality
    	$('#expandList').unbind('click').click(function() {
    		$('.collapsed').addClass('expanded');
    		$('.collapsed').children().show('medium');
    	})
    	$('#collapseList').unbind('click').click(function() {
    		$('.collapsed').removeClass('expanded');
    		$('.collapsed').children().hide('medium');
    	})
    });
    #expList ul, li {
      list-style: none;
      cursor: pointer;
    }
    		
    #expList li {
    	line-height:140%;
    	text-indent:0px;
    	background-position: 1px 8px;
    	background-repeat: no-repeat;
    }
    
    #expList .collapsed:before {
    	font-family: FontAwesome;
       content: "\f07b\00a0";
    }
    
    #expList .expanded:before {
       content: '\f07c\00a0';
    }
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="intranet" id="expList">
      <li class="intranet-folder">Years
        <ul>
          <li class="intranet-folder">2015
            <ul>
              <li class="intranet-folder">January
                <ul>
                  <li><a href="#">Click to download file</a></li>
                </ul>
              </li>
              <li class="intranet-folder">February
                <ul>
                  <li><a href="#">Click to download file</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="intranet-folder">2014
            <ul>
              <li class="intranet-folder">November
                <ul>
                  <li><a href="#">Click to download file</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>