JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<a href="#" class="expand_all">Expand All</a>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
						<tbody><tr>
                            <th></th>
							<th>head 1 </th>
							<th>head 3</th>
							<th>head 3</th>
						</tr>
						<tr>
							<td> <a href="#" class="tr_expand">More</a></td>						
							<td class="grid_moretext"><span>Lorem ipsum dolor sit amet. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente eni</span></td>
							<td class="grid_moretext"><span>Lorem ipsum dolor sit amet. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente eni</span></td>
							<td class="grid_moretext"><span>Lorem ipsum dolor sit amet. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit...

CSS

body{font-size:13px; font-familiy:"Lucida Sans Unicode", "Lucida Grande", sans-serif}
th{
    background:#D28637; padding:5px; border:solid 1px #FFD7AD
}
td{
    background:#FFD7AD; padding:5px; border:solid 1px #D28637
}
a{
    font-size: 16px;
    display: block;
    text-align: center;
    color: #333;
    font-weight: bold;
    text-decoration: underline;
    margin: 10px;
}

JavaScript

var minimized_elements = $('.grid_moretext span');
minimized_elements.each(function(){    
	var t = $(this).text();        
	if(t.length < 55) return;
	$(this).html(
		t.slice(0,55)+'<span>... </span>'+
	'<span class="more_text" style="display:none;">'+ t.slice(55,t.length)+' </span>'
	);
}); 

$('a.tr_expand').click(function(event){
	event.preventDefault();
	var elem=$(this).parent().siblings().find("span.more_text");
    elem.toggle();
    $(this).toggleClass('expand');
    if ($(this).html().trim() == "More") {
		$(this).html("Less");
	}
	else {
		$(this).html("More");
	}
});

$('a.more', minimized_elements).click(function(event){
		event.preventDefault();
		$(this).hide().prev().hide();
		$(this).next().show();        
});

$('a.less', minimized_elements).click(function(event){
	event.preventDefault();
	$(this).parent().hide().prev().show().prev().show();    
});

$('a.expand_all').click(function(event){
	event.preventDefault();
	$('.tr_expand').each(function(){
    	var elem=$(this);
        if(!elem.hasClass('expand'))
        {
 			elem.closest('td').siblings(".grid_moretext").each(function(){
               $(this).find("span.more_text").toggle();    
            });
            if(elem.html()=="More")
       		{
           		$('a.expand_all').text('Collapse All')
           		elem.text('Less');
       		}
       		else
       		{
           		$('a.expand_all').text('Expand All')
           		elem.text('More');
       		}
       	}
        else
        	elem.toggleClass('expand')
	});
});