Code câu hỏi thường gặp Accordion chỉ dùng CSS và HTML
Thêm code CSS và HTML
/* 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}
<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>
<!--[ 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
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.
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.
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.
1 Comments