Code Show more/Show less Giống Youtube Content Blogger

Chào bạn! hôm nay veospot.net tiếp tục chia sẻ mẹo và thủ thuật nhỏ trong blogger để thuận tiện cho anh/em thiết kế blog và giúp blog anh/em nhìn chuyên nghiệp hơn Code Show more / Show less gần giống như trên youtube cho anh/em sử dụng.

Hướng dẫn cách là và cách thực hiện.

1. Code CSS

.read-more{color:#34495e;font-family:'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.6;position:relative}
.read-more .contentt{position:relative;overflow:hidden;max-height:7em;transition:max-height 0.4s ease;color:#333}
.read-more .contentt::before{content:'';position:absolute;bottom:0;width:100%;height:3.5em;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);transition:opacity 0.4s ease;pointer-events:none}
.read-more .trigger,.read-more .collapse{display:inline-flex;align-items:center;gap:6px;color:#f39c12;font-weight:600;cursor:pointer;margin-top:10px;transition:color 0.3s ease}
.read-more .collapse{color:#e74c3c;display:none}
.read-more.expanded .contentt{max-height:100%}
.read-more.expanded .contentt::before{opacity:0;visibility:hidden}
.read-more.expanded .trigger{display:none}
.read-more.expanded .collapse{display:inline-flex}
.read-more .icon-down,.read-more .icon-up{transition:transform 0.3s ease}
.read-more.expanded .icon-down{transform:rotate(180deg)}
.read-more.expanded .icon-up{transform:rotate(0deg)}

2. Code JS (Jasvascript)

    <script>//<![CDATA[
  function toggleReadMore(el) {
    const container = el.closest('.read-more');
    container.classList.toggle('expanded');}
    //]]></script>

3. Code HTML

<div class='read-more'>
  <div class='contentt'>
    <data:post.body/>
  </div>
  <span class='trigger' onclick='toggleReadMore(this)'>
    Show more <i class='fa-solid fa-chevron-down icon'/>
  </span>
  <span class='collapse' onclick='toggleReadMore(this)'>
    Show less <i class='fa-solid fa-chevron-up icon'/>
  </span>
</div>