Initially, the default display should show the shortened version of each element (one line with "..." included). All items must consistently be shown in either the shortened or full-length version.
- If all items are in shortened mode - clicking on one item should expand all elements to their full length, with each element being the same height, matching the height of the tallest element.
- If all items are in full-length mode - clicking on one element should revert all elements back to their shortened version (one line with "...").
I have written the following code to achieve this:
$(document).on("click", ".elementText", function (e) {
if($( this ).css( "-webkit-line-clamp" ) == "1"){
$(this).css("-webkit-line-clamp", "99");
var elementHeight = $(this).css( "height" );
$($(this).parent()).find(".elementText").each(function(){
$(this).css("-webkit-line-clamp", "99");
if($(this).css( "height" ) < elementHeight){
$(this).height(elementHeight);
}
});
}
else{
$(this).css("-webkit-line-clamp", "1");
var elementHeight = $(this).css( "height" );
$($(this).parent()).find(".elementText").each(function(){
$(this).css("-webkit-line-clamp", "1");
if($(this).css( "height" ) > elementHeight){
$(this).height(elementHeight);
}
});
}
});.elementText{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
cursor: pointer;
padding-left: 5px;
width:200px;
background:yellow;
float:left;
margin:5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementText">
Contrary to popular belief, Lorem Ipsum is not simply random text
</div>
<div class="elementText">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<div class="elementText">
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',
</div>If the "expand" (first click after page load) and "shorten" (second click after page load) actions are performed on the same element, the code works as intended. However, if the "expand" (first click after page load) and "shorten" (second click after page load) actions are applied to different elements (e.g., expanding the third element and then shortening the first element), an issue arises where the text may not be truncated correctly.
What causes this malfunction and what adjustments should be made to rectify the issue?