Dưới đây là mô tả các bước thiết lập ẩn hiện thêm nội dung hoàn toàn bằng javascript – Jquery
Cấu trúc html như sau: bao gồm khối nội dung less và khối nội dung chính : nằm trong khối nội dung less. Khối cha ngoài cùng sẽ là link Show more.
|
1 2 3 4 5 6 7 |
<div class="section"> <div class="more-less"> <div class="more-block">Content is here /div> </div> <a class="adjust"><u>Show more</u> </a> </div> |
Code jquery để xử lý click show more và show less.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
jQuery(document).ready(function($) { // The height of the content block when it's not expanded var adjustheight = 90; // The "more" link text var moreText = "+ Show More"; // The "less" link text var lessText = "- Show Less"; // Sets the .more-block div to the specified height and hides any content that overflows $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); // The section added to the bottom of the "more-less" div $(".more-less").append('[…]'); // Set the "More" text $("a.adjust").text(moreText); $(".adjust").toggle(function() { $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); // Hide the [...] when expanded $(this).parents("div:first").find("p.continued").css('display', 'none'); $(this).text(lessText); }, function() { $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); $(this).parents("div:first").find("p.continued").css('display', 'block'); $(this).text(moreText); }); }); |
