Code câu hỏi thường gặp Accordion chỉ dùng CSS và HTML

Xin chào tất cả các bạn, nhân dịp này mình sẽ chia sẻ cách làm đàn Accordion chỉ sử dụng HTMLvà CSS. Có thể một số bạn đã quen thuộc với đàn Accordion, đàn Accordion này thường được tìm thấy trên các trang web mua bán hoặc dịch vụ như cửa hàng trực tuyến hoặc trang đích.

Code câu hỏi thường gặp Accordion chỉ dùng CSS và HTML

Đàn Accordion này được sử dụng cho các mục đích Câu hỏi thường gặp hoặc các câu hỏi thường gặp của khách hàng hoặc người mua tiềm năng. hoặc nó có thể được sử dụng để hiển thị các điều khoản và điều kiện dịch vụ cho các sản phẩm hoặc dịch vụ trên trang web của bạn hoặc bất kỳ điều khoản và điều kiện nào khi cần thiết.

- Tham khảo: Cách (Download) Tải Ảnh Hàng Loạt Trên Website Bất Kỳ - Thủ Thuật Web

Thực tế có rất nhiều hướng dẫn tương tự đang lưu hành trên internet, nhưng nếu bạn chưa tìm được phong cách phù hợp với trang web của mình, thì bạn có thể thử những gì tôi sẽ chia sẻ lần này.

Đối với bản demo, xin vui lòng bấm vào nút bên dưới, ok cho những người bạn muốn thử nó, chúng ta hãy xem như thế nào.

Thêm code CSS và HTML

Chèn CSS bên dưới vào trước thẻ ]]></b:skin> hoặc </style>

/* accordion by wendy code */
.hidden{display:none}
.wc-acrdn-str{position:relative;margin:30px 0 0;padding:0; font-size:14px;line-height:1.7em} 
.wc-acrdn-str .wc-acrdn-ktn{width:100%;padding:18px 0;background-color:#f0f0f0;margin-bottom:5px;border-radius:5px;border:1px solid #f0f0f0;box-shadow:0 1px 0 rgb(0 0 0 / 20%),inset 0 0 0 2px #efefef}
.wc-acrdn-str p.acc{display:none;margin:0;padding-left:32px;position:relative;overflow:hidden;max-height:0;-webkit-transition:all .2s ease;transition:all .2s ease; opacity:.8} 
.wc-acrdn-ttl{display:flex;align-items:center;font-weight:900; color:#262d3d;padding:0 5px}
.wc-acrdn-ttl span{display:flex;width:100%}
.wc-acrdn-ttl span:before{content:'\203A';flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px;font-weight:400;font-size:25px;color:inherit;margin-top:-5px}
.wc-acrdn-inp:checked ~ .wc-acrdn-ttl span:before{transform:rotate(90deg);margin-top:5px} .wc-acrdn-inp:checked ~ .wc-acrdn-ttl span{color:#f89000} 
.wc-acrdn-inp:checked ~  p.acc{max-height:100vh;margin:0 10px;display:block}

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wc-acrdn-str .wc-acrdn-ktn{border:1px solid #4c4f4d;border-bottom-color:#161717;box-shadow:0 1px 0 #161717,inset 0 0 0 2px #4c4f4d;background-color:#4c4f4d}.darkMode .wc-acrdn-ttl{color:#b0b3b8}

Tiếp theo bạn thêm HTML vào nơi mà bạn muốn nó hiển thị

<div class='wc-acrdn-str'>  
<!--[ Accordion 1 ]-->
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc1' name='accordion' type='radio' checked/>
<label class='wc-acrdn-ttl' for='acc1'>
<span>Accordion 1</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 1 and]-->

<!--[ Accordion 2 ]--> 
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc2' name='accordion' type='radio'/>
<label class='wc-acrdn-ttl' for='acc2'>
<span>Accordion 2</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 2 and ]-->
  
<!--[ Accordion 3 ]-->
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc3' name='accordion' type='radio'/>
<label class='wc-acrdn-ttl' for='acc3'>
<span>Accordion 3</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 3  and]-->
  
<!--[ Accordion selanjutnya di sini]-->

</div>

Nếu bạn muốn có thêm phần hiển thị thì cứ thêm code sau và đổi id='_'

<!--[ Accordion 4 ]-->
<div class='wc-acrdn-ktn'>
<input class='wc-acrdn-inp hidden' id='acc4' name='accordion' type='radio'/>
<label class='wc-acrdn-ttl' for='acc4'>
<span>Accordion 4</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 4  and]-->

DEMO Code bê dưới

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

Accordion 2

Accordion 3

- Nếu bạn có thắc mắc gì thì đừng quên để lại lời nhắn ở dưới phần comments nhé, để mình cùng trao đổi.