JSFiddle - React, Tailwind, and code Playground

by Hugo Dewattinne

HTML

<ul class="comment">
    <li class="first">Content 1</li>
    <li>Content 2</li>
    <li>Content 3</li>
    <li>Content 4</li>
    <li>Content 5</li>
    <li>Content 6</li>
</ul><!--#comment-->

CSS

.ui-tooltip{border:none;box-shadow:none;background:#242E34;color:white;}

JavaScript

$(document).ready(function(){
		
		var nComment = $('ul.comment li').length;
	
		if(nComment > 3){
			$('ul.comment').after('<a href="#" title="See more comments" id="viewMore">See comments</a>');
			$('ul.comment li:nth-child(3)').nextAll('li').hide();
		}
	
		$('ul.comment li:nth-child(3),ul.comment li:last-child').addClass('last')
		
		$('#viewMore').click(function(){
			$(this).toggleClass('up');
			$(document).tooltip('destroy').tooltip(); // LIGNE AJOUTEE

			if($(this).hasClass('up')){
				$(this).attr('title','See Less')
			}
			else{
				$(this).attr('title','See more')
			}
			$('ul.comment li:nth-child(3)').toggleClass('last').nextAll('li').fadeToggle('slow'); 
			return false;
		});
		
		// tooltip
        $(function() {
		    $(document).tooltip();
	    });
		
	});