如何在使用按鈕元素時在「顯示更多」和「顯示更少」之間切換？

Question

我正在開展個人項目。我在同一頁面中有幾篇文章，文字相當多（儘管不是那麼大）。我想要的是切換按鈕。點擊按鈕後，應該顯示額外的文本，並且必須更改按鈕值（即從continue reading到show less或類似的東西）。單擊按鈕後，再次文本必須摺疊。除此之外，我想在文本之間切換時添加一些慢動作。我怎麼能這樣做？ 到目前爲止，我所見過的互聯網中的例子並不涉及我期望實現的目標。在互聯網上的大多數演示和示例都使用文本屬性（例如簡單的show more和show less文本），而不是像我這樣的按鈕元素。

<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 functiom：

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>