given list of items + sign attached show more, how can toggle list element + - on click , + when clicking again?
<ul class="practice-areas-list"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> $('ul.practice-areas-list').each(function() { $('li:gt(4)', this).hide(); }); $('ul.practice-areas-list').each(function() { if ($(this).find('li').length > 4) { $(this).append('<li>+</li>').find('li:last').click(function() { $(this).siblings(':gt(4)').toggle(); }); } }); jsfiddle: link
you can add 1 line this:
$(this).html( $(this).html() == '+' ? '-':'+' ) $('ul.practice-areas-list').each(function() { $('li:gt(4)', this).hide(); if ($(this).find('li').length > 4) { $(this).append('<li>+</li>').find('li:last').click(function() { $(this).siblings(':gt(4)').toggle(); $(this).html( $(this).html() == '+' ? '-':'+' ) }); } });li{ list-style-type:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="practice-areas-list"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul>the inside of line, $(this).html() == '+' ? '-':'+' says if content of list item appended @ end plus sign, change minus sign, else change plus sign. takes content , assigns html last list item. note combined 2 .each loops.
Comments
Post a Comment