Jaf-2017 Jaf-2017 - 1 month ago 10
CSS Question

How do I toggle between a "show more" and "show less" while having button element?

I am working on a personal project. I have few articles in a same page, that have pretty large amount of text (not that big though). What I want is toggling the button. Once the button is clicked the additional text should be displayed and the button value have to be changed (i.e. from

continue reading
to
show less
or something similar.) And again after clicking the button, the additional text have to be collapsed. In addition to that I want to add some slow motion while toggling between the text. How could I do that?
The example in the internet I have seen so far does not relate what I am expecting to achieve. Most demo and examples in the internet use the text property (e.g. simple
show more
and
show less
text), not the button element as I do.

<article class="post">
<header>
<div class="title">
<h2><a href="index.html">Who am I? What am I? Why am I?</a></h2>
<p>Sub Header</p>
</div>
<div class="meta">
<time class="published" datetime="2017-01-14">November 1, 2017</time>
<a href="#" class="author"><span class="name">John Doe</span><img src="images/author-avatar.png" alt="" /></a>
</div>
</header>
<a href="index.html" class="image featured"><img src="images/who_iam.jpg" alt="" /></a>
<p>Default text<br>
Toggle this text. Show this text when "continue reading" button is clicked. Once the button is clicked change the button value to "read less". Once the "read less" button is clicked hide this text.

</p>
<footer>
<ul class="actions">
<li><a href="" class="button big">Continue Reading</a></li>
</ul>

</footer>
</article>

Answer Source

If your are using jQuery then -

  1. Initially hide the content with CSS.

  2. Add slideToggle to hidden content on click event.

Here is a demo -> https://codepen.io/thesumit67/pen/wemjPG