Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. Intento lo siguiente, pero por alguna razón no me funciona:
$(document).ready(function() {
$(".more").toggle(function() {
$(this).text("Leer menos...").siblings(".complete").show();
}, function() {
$(this).text("Leer mas...").siblings(".complete").hide();
});
});
.more {
cursor: pointer;
background-color: #ccf;
}
.complete {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="text-comment">
<p class="text-par">"Vision"</p>
<p class="text-name">
<span class="summary">
<p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
</span>
<span class="complete">
<p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
<p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
</span>
<span class="more">Leer mas...</span>
</p>
</div>
Si se puede hacer solo con JavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery.
span
no deberían contenerp
dentro (y unp
no puede ir dentro de otrop
). Eso va a hacer que el HTML interpretado por el navegador no sea como te esperas (y por eso ponía el "creo" arriba, porque puede que esa mala interpretación cause el problema).p
sigue sin funcionar como quiero.details
estará totalmente soportada y extendida y seguro se podrá hacer esto sin necesidad de usar JS.