less/more automatický

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="showLessMore" data-height="100">

<input type="checkbox" checked id="showMore"><label for="showMore" data-more="více" data-less="méně"></label>

<div class="fullContent">
<ul>
	<li>ahoj</li>
	<li>ahoj</li>
	<li>ahoj</li>
	<li>ahoj</li>
	<li>ahoj</li>
	<li>ahoj</li>
	<li>ahoj</li>
	<li>ahoj</li>
</ul>

</div><!-- /.fullContent -->
</div><!-- /.showLessMore -->

  

<div class="showLessMore" data-height="100">
<input type="checkbox" checked id="showMore"><label for="showMore" data-more="více" data-less="méně"></label>
<div class="fullContent">
<ul>
	<li>ahoj</li>
	<li>ahoj</li>
</ul>
</div><!-- /.fullContent -->
</div><!-- /.showLessMore -->

CSS

.showLessMore { display: flex; flex-direction: column-reverse;}
#showMore { opacity: 1}
.showLessMore > input {    visibility: hidden; display: none;}
.showLessMore > input + label { display: none; padding: 0;}
.showLessMore > input:checked + label { box-shadow: -20px 0 30px 10px white}
.showLessMore.hasMore > input + label { display: block; }
.showLessMore.hasMore > input:checked ~ .fullContent { max-height: 101px; overflow: hidden;} /* +1px k data-height */
.showLessMore .fullContent { max-height: auto; transition: max-height 0.3s ease;}
.showLessMore > input:checked + label:before { content: "▼";  background: none;}
.showLessMore > input + label:before { content: "▲"}
.showLessMore > input:checked + label:after {  content: attr(data-more);}
.showLessMore > input + label:after {  content: attr(data-less);}

JavaScript

$(".showLessMore").each(function(){
    var _self = $(this);

    if (_self.outerHeight() > $(this).attr("data-height") ){
        _self.addClass('hasMore');
    } else {
        _self.removeClass('hasMore');
    }
});