Hướng dẫn cách tạo nội dung đóng mở đẹp mắt bằng CSS3

Điểm 4.6/5 dựa vào 87 đánh giá

Với CSS3 thì bạn hoàn toàn có thể tạo ra nhiều tiện ích đẹp mắt mà không cần phải nhờ đến JS, và ở đây là một cách để có thể tạo được nội dung dạng rút gọn và khi người dùng muốn xem nội dung đầy đủ thì có thể click để mở toàn bộ nội dung. Bên dưới là đoạn code có thể giúp bạn làm việc này một cách đơn giản, có thể sử dụng trong Template Blogspot hay bất kỳ nền tảng website nào.

Bạn có thể click xem demo ngay bên dưới

"Trở thành phiên bản hạng nhất của chính mình thì tốt hơn nhiều lần so với việc trở thành bản sao của ai đó" – Judy Garland. Những câu nói hay sẽ mang lại rất nhiều cảm hứng và tạo động lực lớn cho chúng ta trong cuộc sống, dưới đây là 20 câu danh ngôn tuyệt vời mà bạn cần nên nhớ sẽ giúp tiếp thêm động lực cho bạn.
1. "Bạn sẽ khó mà có thể bắt đầu viết chương tiếp theo của cuộc đời mình khi mà bạn cứ đọc mãi những chương trước đó." – Khuyết Danh.
2. "Đôi khi, bạn sẽ chẳng biết được những khoảnh khắc quý giá đến nhường nào cho đến khi chúng biến thành những kí ức đẹp" – Dr. Sesus.
3. "Hãy biến ngày hôm nay trở nên thật tuyệt vời đến nỗi ngày hôm qua cũng phải ghen tị" – Khuyết danh.
4. "Hãy tự tặng cho mình vài cành hoa. Những bông hoa chẳng thể nào giải quyết được mọi vấn đề của bạn đâu, nhưng chúng sẽ cho bạn một sự khởi đầu tuyệt vời" – Khuyết danh.
5. "Cuộc sống là thức dậy sớm hơn một giờ đồng hồ để được sống thêm một giờ đồng hồ nữa" – Khuyết danh.
6. "Hãy thử trở thành tia hi vọng cho một người nào đó đang cảm thấy tuyệt vọng" – Maya Angelou.
7. "Chúng ta không thể giúp đỡ tất cả mọi người được, nhưng tất cả mọi người có thể cùng nhau giúp đỡ một người" – Ronan Reagan.
8. "Dù cho bản tin thời tiết có dự báo điều gì đi nữa, thì ta hãy cứ sống vui vẻ như thể mùa xuân đã đến rồi" – Lily Pulitzer.
9. "Căn bệnh lớn nhất của thời đại này đó là khi người ta cảm thấy mình không hề được yêu thương" – Công nương Diana.
10. "Nếu bạn cảm thấy chán nản, khoan hãy tuyệt vọng. Hãy nhìn xem, mặt trời có phiên lặn vào mỗi đêm, nhưng sáng hôm sau nó lại quay trở lại đấy thôi" – Dolly Parton.

Bạn chèn đoạn CSS bên dưới ngay trước thẻ đóng </head> trong HTML

<style>.accordeon-checkbox{
display:none
}
.accordeon-title-label{
float: right;
font-size:20px;
cursor:pointer;
display:block;
color:#B49D61;
font-weight:bold;
font-family:arial;
width:10px;
height:10px;
}
.accordeon-content{
padding:10px;
background-color:#463503;
width:550px;
height:46px;
line-height:1.5;
overflow:hidden;
-webkit-transition:height 1s ease;
transition:height 1s ease
}
.accordeon-title-label:before {
content: "+";
}
.accordeon-checkbox:checked + .accordeon-content .accordeon-title-label:before{
font-size: 24px;
font-family:verdana;
top:-2px;
position:relative;
content: "-";
}
.accordeon-checkbox:checked + .accordeon-content{
height:auto
}</style>

Và bây giờ bạn muốn tạo nội dung dạng đóng mở thì sử dụng đoạn HTML bên dưới và chèn vào vị trí bạn muốn trên website hay blogspot của mình.

<div class="accordeon">
<input type="checkbox" name="accordeon-title" class="accordeon-checkbox" id="accordeon-title" />
<div class="accordeon-content">
<label for="accordeon-title" class="accordeon-title-label"></label>
<p> NỘI DUNG CỦA BẠN Ở ĐÂY </p>
</div>

</div>

Nếu bạn muốn tạo nhiều nội dung dạng này thì chỉ cần thêm đoạn HTML ở trên và thay đổi nội dung lại là được

Chúc bạn thành công!

Chuyên mục: Blogspot nâng cao Blogspot tips