Prosty skrypt do odkrywania zawartości tekstowej DIVa
Powiedzmy, że w DIV znajduje się 5 paragrafów. Skrypt:
- Pokaze tylko pierwszy paragraf (<p>)
- Po kliknięciu „więcej” pokaze resztę
- Jak jest tylko jeden paragraf – nie pokaże przycisku „więcej”
- Po kliknięciu „więcej” – usunie ten przycisk
Do działania konieczna jest biblioteka jQuery, która zazwyczaj jest zaimplementowana w szablonie.
Kod HTML z tekstem:
|
1 2 3 4 5 6 |
<div class="categorydescriptioncontent"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget convallis ante. </p> <p>Maecenas facilisis elit et sapien pulvinar, eget efficitur velit lobortis. Sed laoreet convallis scelerisque. Nam sed convallis ex. Mauris dapibus diam ante, semper mollis mauris pharetra nec. Curabitur nec risus mattis, scelerisque ipsum eu, ullamcorper risus. Duis mattis dolor quis imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat, nisl non ornare semper, augue ante accumsan metus, et scelerisque diam felis a ipsum. Phasellus placerat sodales laoreet. Proin eu hendrerit quam.</p> <p>Suspendisse vulputate nunc fermentum nisi faucibus porta. Sed dictum venenatis erat vel molestie. </p> </div> <a class="showall" href="javascript:void(0)">» pokaż więcej</a> |
Kod Javascript (jQuery):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function(){ $('.categorydescriptioncontent p').each(function(i, el){ if ( i === 0) { $('.showall').hide(); } else { $('.showall').show(); $(this).hide(); } }); $(document).on("click", ".showall", function () { $('.categorydescriptioncontent p').show(); $(this).remove(); }); }); |
