zjistit jestli je element vyský a zobrazit tlačítko "více"

by Petr Haluza

HTML

<div class="Description lessMore" data-height="300">
		<input type="checkbox" checked="" id="showMore1"><label for="showMore1" data-more="více" data-less="méně"></label>
		<div class="fullContent">
			<h4>Podrobnosti k produktu</h4>
			<!-- z i6 -->
		    <b><font size="4">HP Pavilion Gaming 17-cd0003nc</font></b>
				<p>Základem herního notebooku je čtyřjádrový procesor <b>Intel Core i5-9300H</b>, pracující na frekvenci 2,4 GHz, doplnìný o <b>8 GB</b> operaèní pamìti. Vybaven je <b>17,3"</b> matným displejem s <b>Full HD</b> rozlišením 1920 x 1080 bodù. Obrazová data obstarává grafická karta <b>NVIDIA GeForce GTX 1650</b> s 4 GB vlastní pamìti. Pro data je k dispozici <b>SSD disk</b> s kapacitou <b>512 GB</b>. Notebook je vybaven bezdrátovým pøipojením <b>Wi-Fi a Bluetooth</b>, webkamerou, èteèkou pamìových karet a podsvícenou klávesnicí. Dodáván je s operaèním systémem <b>Windows 10 Home</b>.</p>
				<p><b>ZÁKLADNÍ SPECIFIKACE</b></p>
				<p><b>Grafická karta:</b> NVIDIA GeForce GTX 1650</p>
				<p><b>Výbava:</b> Wi-Fi, Bluetooth, webkamera, èteèka pamìových karet, podsvícená klávesnice</p>
				<p><b>Procesor:</b> Intel Core i5-9300H</p>
				<p><b>Operaèní systém:</b> Windows 10 Home</p>
				<p><b>Úhlopøíèka displeje:</b> 17,3"</p>
				<p><b>Velikost operaèní pamìti:</b> 8 GB</p>
				<p><b>HDD kapacita:</b> 512 GB SSD</p>
				<p><b>Hmotnost:</b> 2,74 kg</p>
				<p><b>Barva:</b> èerná</p>
	    <!-- z i6 -->
    </div>
  </div>
  
  
  <div class="Description lessMore" data-height="100">
		<input type="checkbox" checked="" id="showMore2"><label for="showMore2" data-more="víc" data-less="míň"></label>
		<div class="fullContent">
			<h4>Podrobnosti k produktu</h4>
			<!-- z i6 -->
		    <b><font size="4">HP Pavilion Gaming 17-cd0003nc</font></b>
				<p><b>ZÁKLADNÍ SPECIFIKACE</b></p>
				<p><b>Grafická karta:</b> NVIDIA GeForce GTX 1650</p>
				<p><b>Výbava:</b> Wi-Fi, Bluetooth, webkamera, èteèka pamìových karet, podsvícená...

CSS

.Description, .Specifications, .AltProducts {    position: relative;}
.lessMore > input {    visibility: hidden;    display: none;}

.lessMore > input + label {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    display: none; /******/
    width: 100%;
    margin-left: -1em;
    text-align: center;
    padding: 1em 0;
    background: linear-gradient(rgba(255,255,255,0),#f7f9fc,#f7f9fc);
}
.lessMore.hasMore > input + label {
      display: block; /******/
}


.lessMore > input:checked ~ .fullContent { max-height: 380px} /* +1px k data-height */
.lessMore[data-height="300"] input:checked ~ .fullContent { max-height: 300px}/* +1px k data-height */
.lessMore > div {  overflow: hidden;  padding-bottom: 4em;}
.fullContent { max-height: auto; transition: max-height 0.3s ease;}
.lessMore > input:checked + label:before { content: "1";}
.lessMore > input + label:before { content: "2"; height: 1.5em; display: block;}
.lessMore > input:checked + label:after {  content: attr(data-more);}
.lessMore > input + label:after {  content: attr(data-less);}

JavaScript

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

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