使用 Javascript 在网站页面内容中阅读更多内容并减少阅读内容

Question

Expected output: i want Read more & Read less click option be at the bottom with all content which include paragraph & list.. (Codepen shows Read more & Read less click option at the top) Here what i tried: HTML

<a href="#" class="show_hide" data-content="toggle-text">Read More</a>
<div class="content">Testing
  <ul>
    <li>first</li>
  </ul>
</div>

Javascript:

$(document).ready(function () {
  $(".content").hide();
  $(".show_hide").on("click", function () {
    var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
    $(".show_hide").text(txt);
    $(this).next('.content').slideToggle(200);
  });
});

Codepen link for Read more & read less implementation: enter link description here

Answer 1

To move Read More link to the bottom and have it work use "prev" instead of "next" method.

 $(document).ready(function () { $(".content").hide(); $(".show_hide").on("click", function () { var txt = $(".content").is(':visible')? 'Read More': 'Read Less'; $(".show_hide").text(txt); $(this).prev('.content').slideToggle(200); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content">Testing <ul> <li>first</li> </ul> </div> <a href="#" class="show_hide" data-content="toggle-text">Read More</a>

Answer 2

You can use css for this

.show_hide{
  position:absolute;
  top:100%;
}

Or just put it at the bottom of a container that is what people do

Answer 3

Your content class (which gets shown and hidden) contains all of your visible content. You just need to include some content that does not have the content class before your a element , something like:

 $(document).ready(function() { $(".content").hide(); $(".show_hide").on("click", function() { var txt = $(".content").is(':visible')? 'Read More': 'Read Less'; $(".show_hide").text(txt); $(this).next('.content').slideToggle(200); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h3>Always shown</h3> <p>Some text</p> </div> <a href="#" class="show_hide">Read More</a> <div class="content"> <h3>Sometimes shown</h3> <p>More text</p> </div>

Answer 4

Try this:

 $(document).ready(function () { $(".show_hide").on("click", function () { var txt = $(".content").hasClass('visible')? 'Read More': 'Read Less'; $(".show_hide").text(txt); $(".content").toggleClass("visible"); }); });

 .content { height:90px; overflow:hidden; margin-bottom:10px; }.content.visible { height:auto; overflow:visible; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content">Testing <ul> <li>first</li> <li>first</li> <li>first</li> <li>first</li> <li>first</li> <li>first</li> <li>first</li> <li>first</li> </ul> </div> <a href="#" class="show_hide" data-content="toggle-text">Read More</a>