拥有按钮元素时，如何在“显示更多”和“显示更少”之间切换？

Question

我正在做一个个人项目。 我在同一页面上只有几篇文章，其中包含大量文本（虽然不是很大）。 我想要的是切换按钮。 单击按钮后，应显示其他文本，并且必须更改按钮的值（即，从continue reading到show less或类似内容）。再次单击按钮后，必须折叠其他文本。 除此之外，我还想在文本之间切换时添加一些慢动作。 我该怎么办？ 到目前为止，我在互联网上看到的示例与我期望实现的目标无关。 互联网上的大多数演示和示例都使用text属性（例如，简单地show more和show less文本），而不是像我一样使用button元素。

 <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 1

如果您使用的是jQuery，则-

1. 最初使用CSS隐藏内容。

2. 在单击事件slideToggle添加到隐藏的内容。

这是一个演示-> https://codepen.io/thesumit67/pen/wemjPG

Answer 2

您应该创建一个带有简单javascript函数的按钮：

 visible = false; //var that keeps track if the content is visible. txt = document.getElementById("text"); btn = document.getElementById("btn"); function toggle() { if(visible) { visible = 0; btn.innerHTML = 'Show more'; txt.style.display = 'none'; } else { visible = 1; btn.innerHTML = 'Show Less'; txt.style.display = 'block'; } } 

  <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</p> <p id='text' style='display: none;'> 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><button id='btn' onclick='toggle()'>Show More</button></li> </ul> </footer> </article>