单击按钮时如何显示隐藏的段落？

Question

<div class="inf-frame-text">
<h4> Learning Plus </h4>
<p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation.  </p>
<a class="inf-read-btn"> Read More + </a>
</div>

        .inf-frame-text {
            margin-top: 120px;
            &:first-child {
                margin-top: 0;
            }
            p {
                height: 62px;
                overflow: hidden;
                transition:height 0.3s ease-out;
            }
            p.is-active {
                height: 100%;
                overflow: visible;
                transition:height 0.3s ease-out;
            }
        .inf-read-btn {
            display: block;
            color:#00ffbf !important; 
            cursor: pointer;
        }

      $('.inf-read-btn').on('click', function() {
        $('.inf-frame-text p').toggleClass('is-active');
      });

Hey guys I need to create few grids with contents. But few parts of the contents should be hided and when I click on that read more button it should show all contents with toggle animation. Here I just tried some java script code for that but didn't work well. Also one more thing is when click on that button all the other contents should be hided except the contents related to that button we going to click.

Answer 1

It might be because you did not close the .inf-frame-text style correctly. It is missing a closing brace.

.inf-frame-text {
   margin-top: 120px;

   &:first-child {
      margin-top: 0;
   }

 $('.inf-read-btn').on('click', function() { // Find the container whose button was clicked var $container = $(this).closest('.inf-frame-text'); // find the p inside it var $elem = $container.find('p'); // toggle the p element for that container $elem.toggleClass('is-active'); $('.inf-frame-text p').not($elem).removeClass('is-active'); }); 

 .wrapper { display: flex; flex: 1 0 auto; } .inf-frame-text { margin-top: 120px; &:first-child { margin-top: 0; } } p { opacity: 0; overflow: hidden; transition: opacity 0.3s ease-out; } p.is-active { opacity: 1; overflow: visible; } .inf-read-btn { display: block; color: #00ffbf !important; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="wrapper"> <div class="inf-frame-text"> <h4> Learning Plus </h4> <p> For our clients, the future is a continuum. It's not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It's not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It's not about the next big thing, it's simply everything that's next. The next experience. The next innovation. </p> <a class="inf-read-btn"> Read More + </a> </div> <div class="inf-frame-text"> <h4> Learning Plus </h4> <p> For our clients, the future is a continuum. It's not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It's not about the next big thing, it's simply everything</p> <a class="inf-read-btn"> Read More + </a> </div> <div class="inf-frame-text"> <h4> Learning Plus </h4> <p> For our clients, the future is a continuum. It's not about the next big thing, it's simply everything that's next. The next experience. The next in it's simply everything that's next. The next experience. The next innovation. </p> <a class="inf-read-btn"> Read More + </a> </div> </div>