Comment masquer/afficher plus de texte à l'intérieur d'une certaine longueur (comme youtube)

Le secret sur cet effet, est pour envelopper les parties que vous souhaitez contrôler avec des balises HTML.

$(".more").toggle(function(){
    $(this).text("less..").siblings(".complete").show();    
}, function(){
    $(this).text("more..").siblings(".complete").hide();    
});

<span class="teaser">text goes here</span>

<span class="complete"> this is the 
complete text being shown</span>

<span class="more">more...</span>

Démo en ligne ici: http://jsfiddle.net/zA23k/215/

Je sais que cette question est un peu vieux (et a eu c'est de répondre à déjà sélectionné), mais pour ceux qui veulent une autre option qui vont venir à travers cette question par le biais de Google (comme je l'ai fait), j'ai trouvé ce texte dynamique raccourcisseur:

Dynamiquement Texte abrégé par “Afficher Plus” le lien à l'aide de jQuery

J'ai trouvé que c'était mieux parce que vous pouvez définir la limite de caractères, plutôt que d'supplémentaire s'étend dans le code, ou en définissant une hauteur spécifique à un conteneur.

Espérons que cela aide quelqu'un d'autre!

Pour ceux qui veulent juste un simple fichier d'amorce de solution.

    <style>
     .collapse.in { display: inline !important; }
    </style>

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
    <span class="collapse" id="more">
      1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </span>
    <span><a href="#more" data-toggle="collapse">... <i class="fa fa-caret-down"></i></span>

Voici un CodePen exemple.

N'oubliez pas d'inclure jquery et bootstrap.min.js dans votre en-tête.

Si vous n'utilisez pas fontawesome icônes, changer <i class="fa fa-caret-down"></i> à n'importe quelle icône de votre choix.

Montrer Plus Montrer Moins (Seulement si nécessaire) Pas de JQuery

J'avais besoin de cette fonctionnalité pour un flux RSS sur notre site internet. C'est ce que je suis venu avec:

JS:

//Create Variables
var allOSB = [];
var mxh = '';
window.onload = function() {
//Set Variables
allOSB = document.getElementsByClassName("only-so-big");
if (allOSB.length > 0) {
mxh = window.getComputedStyle(allOSB[0]).getPropertyValue('max-height');
mxh = parseInt(mxh.replace('px', ''));
//Add read-more button to each OSB section
for (var i = 0; i < allOSB.length; i++) {
var el = document.createElement("button");
el.innerHTML = "Read More";
el.setAttribute("type", "button");
el.setAttribute("class", "read-more hid");
insertAfter(allOSB[i], el);
}
}
//Add click function to buttons
var readMoreButtons = document.getElementsByClassName("read-more");
for (var i = 0; i < readMoreButtons.length; i++) {
readMoreButtons[i].addEventListener("click", function() { 
revealThis(this);
}, false);
}
//Update buttons so only the needed ones show
updateReadMore();
}
//Update on resize
window.onresize = function() {
updateReadMore();
}
//show only the necessary read-more buttons
function updateReadMore() {
if (allOSB.length > 0) {
for (var i = 0; i < allOSB.length; i++) {
if (allOSB[i].scrollHeight > mxh) {
if (allOSB[i].hasAttribute("style")) {
updateHeight(allOSB[i]);
}
allOSB[i].nextElementSibling.className = "read-more";
} else {
allOSB[i].nextElementSibling.className = "read-more hid";
}
}
}
}
function revealThis(current) {
var el = current.previousElementSibling;
if (el.hasAttribute("style")) {
current.innerHTML = "Read More";
el.removeAttribute("style");
} else {
updateHeight(el);
current.innerHTML = "Show Less";
}
}
function updateHeight(el) {
el.style.maxHeight = el.scrollHeight + "px";
}
//thanks to karim79 for this function
//http://stackoverflow.com/a/4793630/5667951
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
.main-container {
margin: 30px auto;
max-width: 1000px;
padding: 20px;
}
.only-so-big p {
padding: 0;
margin: 0;
}
p {
font-size: 15px;
line-height: 20px;
}
hr {
background: #ccc;
display: block;
height: 1px;
width: 100%;
}
/*
NECESSARY SECTION
*/
.only-so-big {
background: rgba(178, 252, 255, .3);
height: 100%;
max-height: 100px;
overflow: hidden;
-webkit-transition: max-height .75s;
transition: max-height .75s;
}
.read-more {
background: none;
border: none;
color: #1199f9;
cursor: pointer;
font-size: 1em;
outline: none; 
}
.read-more:hover {
text-decoration: underline;
}
.read-more:focus {
outline: none;
}
.read-more::-moz-focus-inner {
border: 0;
}
.hid {
display: none;
}

HTML:

<div class="main-container">
<h1>Controlling Different Content Size</h1>
<p>We're working with an RSS feed and have had issues with some being much larger than others (content wise). I only want to show the "Read More" button if it's needed.</p>
<div class="only-so-big">
<p>This is just a short guy. No need for the read more button.</p>
</div>
<hr>
<div class="only-so-big">
<p>This one has way too much content to show. Best be saving it for those who want to read everything in here.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi THE END!</p>
</div>
<hr>
<div class="only-so-big">
<p>Another small section with not a lot of content</p>
</div>
<hr>
<div class="only-so-big">
<p>Make Window smaller to show "Read More" button.<br> totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed?</p>
</div>
</div>

Une autre solution possible que nous pouvons utiliser 2 de l'élément HTML pour stocker
bref le texte complet. Par conséquent, nous pouvons afficher/masquer le code HTML
élément 🙂

<p class="content_description" id="brief_description" style="display: block;"> blah blah blah blah blah  </p><p class="content_description" id="complete_description" style="display: none;"> blah blah blah blah blah with complete text </p>
/* jQuery code to toggle both paragraph. */
(function(){
$('#toggle_content').on(
'click', function(){
$("#complete_description").toggle();
$("#brief_description").toggle();
if ($("#complete_description").css("display") == "none") {
$(this).text('More...');
}   else{
$(this).text('Less...');
}
}
);
})();

Vous pouvez utiliser comme cette

$(".jsgrid-cell").each(function(i,v){
var txt=$(v).text();
if(txt.length>100){
var shortText=txt.substring(0, 100)+
"<span onclick='$(this).hide();$(this).next().toggle();'>"+
"..."+
"</span>"+
"<span  style='display:none'>"+
txt.substring(100, txt.length)+
"</span>";
$(v).html(shortText );
}
});

HTML

<div>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>asdasdasdasd
<br>
</div>
<a id="more" href="#">Read more </a>
<a id="less" href="#">Read less </a>

CSS

<style type="text/css">
div{
width:100px;
height:50px;
display:block;
border:1px solid red;
padding:10px;
overflow:hidden;
}
</style>    

jQuery

<link rel="stylesheet" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" 
type="text/css" media="all" />
<script type="text/javascript">
var h = $('div')[0].scrollHeight;
$('#more').click(function(e) {
e.stopPropagation();
$('div').animate({
'height': h
})
$('#more').hide();
$('#less').show();
});
$('#less').click(function(e) {
$('#more').show();
$('#less').hide();
});
$(document).click(function() {
$('div').animate({
'height': '50px'
})
})
$(document).ready(function(){
$('#less').hide();
})
</script>