js实现点击展开收起

HTML代码：

<div>
      <span>
         <h1 class="title">如何才能做到活在当下？</h1>
         <p>我们先反问一句，找出原因——为什么很多人不能活在当下？无非是这十二个字：沉溺过去。焦虑未来。不喜当下。谁都想一步一个脚印，一生顺遂，平安喜乐，但这几乎是不可能的。其实很多人并未真正捣入生活的深处，只轻轻碰一脚就缩了回来，利用头脑里的假设，逃遁到消逝的过去与遥远的未来里。时间久了，你会感到浑浑噩噩，空虚感包围自己，才想起要活在当下。又问，什么是活在当下？——活在当下，是既要活在当下的欢乐中，又要活在当下的痛苦中。除此之外，还有离别，苦闷，现实，虚假，窘态，破碎，邋遢等等。</p>
         <p>如何才能做到活在当下？面对这些，你要时常同自己讲：不要害怕。不要失落。不要担心。使自己保持平静，然后我们一步一步来。首先，要做到不沉溺于过去，暂且封锁回忆。过去的事情总是美好的，即便不好，套上回忆的躯壳，也是好的。你把每一次哭泣，每一次欢愉，都拾起来装了一兜，重得要死，偏偏你还要驮着它们前进，因为你舍不得，放不下。那些不好的事情，你试图通过回忆去重新定格它，将它变成好的。而那些原本就好的事情，你也不放过，在想象里把它变得更好。回忆是不能篡改的，它只提供一条追随的通道，是一种诱惑，诱着你往回跑。你要适时地止步，站定在那里，看一眼后，转身继续往前走。</p>
         <p> 其次，要做到对未来不焦虑，保持平常心。人一旦焦虑，就会横冲直撞，别人说什么就是什么，别人怎么做你就跟着怎么做，失去自我。你要知道，你才是你整个生命中最重要的支点，只有每一步走踏实了，你的灵魂才能被立起。</p>
         <p> 接着，不逃避当下，认真、专心去着手眼前的事。这时，我们要学会凭一瞬的直觉去确认，如果这件事不做会后悔的，那就立即去做。争取把即将被延误的事情，放到当下。想要心无杂念地活在当下，光做到上面这一点还不够，你还要收回意识，放开感官，像一位艺术创作者那样去感受当下。你要让身边的事物看起来舒适，让自己觉得满意。你要爱上此刻的自己，爱上目之所及的一切。</p>
         <p>这样，你才不至于因不喜欢当下，而选择了逃避。你才不至于在承下的那一刻，满目惊慌，支离破碎。所有的美好事物，你都该盛下，那些不好的，你也能盛下，因为你这副单薄的躯体是世间顶好的容器。生来是为了接受。世事无常，一切处在变化当中。每一天、每一天都更远离秋天。珍惜当下。</p>
      </span>
      <a href="javascript:;">收缩</a>
   </div>

 

CSS代码：

 div {
         width: 1200px;
         margin: 40px auto;
         border: 2px solid #f2f2f2;
         padding: 20px;
      }
      .title{
         text-align: center;
         font-size: 24px;
         
      }
      p{
         text-indent: 2em;
         text-align: justify;
      }

 

JS代码：

<script>
      window.onload = function () {
         var span = document.getElementsByTagName("span")[0];
         console.log(span);
         var btn = document.getElementsByTagName("a")[0];
         //拿到所有文字
         var str = span.innerHTML;
         //设置一个开关，记录展开和收缩
         var isOn = true;
         //btn添加事件，在事件里修改span文字
         btn.onclick = function () {
            //点击按钮的时候改变开关的值
            isOn = !isOn;
            if (isOn == true) {
               span.innerHTML = str;
               btn.innerHTML = "收缩";
            } else {
               //收缩
               span.innerHTML = str.substring(0, 300) + "...";
               btn.innerHTML = "展开";
            }
         }
      }