I have some text which I don't want to show completely, just a part of it and have the option to "read more" with a button or whatever. I try the following, but for some reason it doesn't work for me:
$(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>If it can be done with just JavaScript it would be much better, but all the examples I found are with jQuery.
The problem that the code does not work for you is because of how you are using
toggle. That method hides/shows elements by passing it two parameters: duration and function to execute when the animation is complete. As you are trying to run it, it is equivalent to the eventtogglethat was deprecated as of version 1.8 and removed as of version 1.9. This is because you probably relied on an outdated tutorial or page.One solution would be to listen to the click event and do a
togglede#complete(also changing the button text). Something like this:With JavaScript, depending on the content of your
HTML, one option would be to only access previousElementSibling so that from this property, you can add and remove a class with the classListtogglepropertyFor this, before creating a class
showthat is the one used fortoggleSomething close to what you're looking for exists in HTML without the need for JavaScript or jQuery.
<details>The and tags<summary>are precisely to do something similar to what you want: an accordion/tab that shows on click and hides on click again:This solution has some problems:
It is not supported by all browsers (and specifically IE/Edge... although it seemed that it was going to enter Edge , in the end it didn't and they have been "working on it" for a year).
Even in browsers that support it, it's not very widespread (you can't configure how the text is going to be displayed, and the few configurations available are using browser prefixes).
Still, CSS can be used for some styling, and knowing that the attribute
openis added when the text is open, you can play around with::before/::afterto make the text change (but you'll still not be able to put it behind it, at least for now).Another way would be adding classes to make it look complete and shorten it.
To shorten the paragraph using css you can use
white-space: nowrap;An alternative to just using HTML+CSS
checkboxand sibling selectors.