Expand Text - Raccolta di codice e script

Title
Vai ai contenuti
Expand Text
Utilizzando solo l'oggetto HTML

Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.

Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.

Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.

Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.

Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.

Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.

Cliccando sul testo a sinistra questo si espande

Clicking on the text on the left expands it
CODICE IN OGGETTO HTML

<!-- partial:index.partial.html -->
<div class="text-block" data-js="text-expand">
 <div data-js="text-inner">
   <p>
     Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.
   </p>
   <p>
     Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.
   </p>
 </div>
</div>

<div class="text-block" data-js="text-expand">
 <div data-js="text-inner">
   <p>
     Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.
   </p>
   <p>
     Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.
   </p>
   <p>
     Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.
   </p>
   <p>
     Curabitur arcu mauris, hendrerit sit amet nisl at, ultrices porta tellus. Aliquam at augue diam! Sed a nunc sit amet diam sodales blandit! Suspendisse diam purus, varius ut sodales ut, elementum quis nulla. Nunc convallis velit a erat mollis; eu aliquet velit dignissim. Maecenas molestie metus sit amet nisi faucibus dignissim. Nulla faucibus quis nibh vel consequat? Pellentesque adipiscing porta magna sit amet eleifend? Suspendisse potenti.
   </p>
 </div>
</div>
<!-- partial -->

<script>
   // When element with data-js="text-expand" is clicked before the function...
$('[data-js="text-expand"]').on('click', function(){
 
 // If the clicked element DOESN'T have the class 'expand'...
 if(!$(this).hasClass('expand')){
   
   // Take the clicked element, find it's text-inner element, grab
   // the height and store in aniHeight variable.
   var aniHeight = $(this).find('[data-js="text-inner"]').height();
   
   // Now animate the height using the var above, also adding class expand.
   $(this).animate({'height':aniHeight},400);
   $(this).addClass('expand');
 }
 
 // else if the clicked element DOES have class 'expand', animate
 // the height back to it's original state, which in this case is 130px,
 // oh and remove the class expand.
 else {
   $(this).animate({'height':130},400);
   $(this).removeClass('expand');
 }
});
</script>


CODICE ESPERTO IN OGGETTO HTML (CSS)

p {
 margin:20px 0;
 padding:0;
 line-height:1.4
}

p:first-child {
 margin-top:0;
}

.text-block {
 padding:20px;
 width:90%;
 font-family:arial;
 overflow:hidden;
 height:130px;
 cursor:pointer;
}

.text-block:hover,
.text-block.expand {
 background-color:#f3f3f3;
}
Torna ai contenuti