less/more jquery v 2024

skriptem zjistím výšku bloku s obsahem,pokud je vyšší než nastaven á hodnota, zobrazíme tlačítko více/méně a obsah skrýváme/odkrýváme

by Petr Haluza

HTML

<div class="container">

<div class="showLessMore" data-max-height="90">
<input type="checkbox" checked id="showMore1">
<label for="showMore1" data-zobraz="Zobrazit" data-more="více" data-less="méně"></label>
	<div class="fullContent"><!-- js setHeight -->
	<ul>
		<li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li>
	</ul>
	</div><!-- /.fullContent -->
</div><!-- /.showLessMore -->

  

<div class="showLessMore" data-max-height="110">
<input type="checkbox" checked id="showMore2">
<label for="showMore2" data-zobraz="Zobrazit" data-more="více" data-less="méně"></label>
	<div class="fullContent"><!-- js setHeight -->
	<ul>
		<li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li><li>Lorem ipsum dolor blábol...</li>
	</ul>
	</div><!-- /.fullContent -->
</div><!-- /.showLessMore -->

</div class="container">

CSS

.showLessMore { display: flex; flex-direction: column-reverse; }
.showLessMore > input { visibility: hidden; display: none;}
.showLessMore > input + label { display: none}
.showLessMore.hasMore > input + label { display: block; }
.showLessMore.hasMore > input:checked ~ .fullContent { overflow: hidden;position: relative} /* js přidá max-height */
.showLessMore .fullContent { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease-out;	}
.showLessMore.hasMore > input:not(:checked) ~ .fullContent { grid-template-rows: 1fr; max-height: 100% !important}


.showLessMore.hasMore:has(input:checked) .fullContent:before { content: "";  background: linear-gradient(to top, lightblue 20%, transparent); display: block;  position: absolute; bottom: 0; height: 4em; width: 100%; }

.showLessMore > input + label { border: 2px solid cadetblue; width:max-content; margin: 0 auto; padding: .25em .5em; cursor:pointer}	
.showLessMore > input:checked + label:after {  content: attr(data-zobraz) " " attr(data-more) " ▼";}
.showLessMore > input + label:after {  content: attr(data-zobraz) " " attr(data-less) " ▲";}




/* jen demo*/
.container { max-width: 500px; margin: 1em auto}
.showLessMore { background:lightblue}

JavaScript

$(".showLessMore").each(function(){
    if ($(this).outerHeight() > $(this).attr("data-max-height") ){
        $(this).addClass('hasMore');
    } else {
        $(this).removeClass('hasMore');
    }
		var setHeight = parseInt($(this).attr("data-max-height")) + 1 ;
		$(this).find(".fullContent").css( "max-height", + setHeight + "px" );
		//console.log(setHeight)
});