{"id":91564,"date":"2025-11-30T22:27:07","date_gmt":"2025-11-30T15:27:07","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=91564"},"modified":"2025-12-02T09:39:47","modified_gmt":"2025-12-02T02:39:47","slug":"huong-dan-su-dung-accordion-bootstrap","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/","title":{"rendered":"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Gioi_thieu_ve_Accordion_trong_Bootstrap\" >Gi\u1edbi thi\u1ec7u v\u1ec1 Accordion trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Cau_truc_co_ban_va_cach_hoat_dong_cua_Accordion\" >C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n v\u00e0 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a Accordion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Cac_bien_the_Accordion_trong_Bootstrap\" >C\u00e1c bi\u1ebfn th\u1ec3 Accordion trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Cac_nhom_thuoc_tinh_va_class_chinh_trong_Accordion\" >C\u00e1c nh\u00f3m thu\u1ed9c t\u00ednh v\u00e0 class ch\u00ednh trong Accordion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Lam_viec_voi_Accordion_bang_JavaScript\" >L\u00e0m vi\u1ec7c v\u1edbi Accordion b\u1eb1ng JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Mot_so_luu_y_khi_su_dung_Accordion_Bootstrap\" >M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Accordion Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Bai_tap_luyen_tap_su_dung_Accordion_3_cap_do\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Accordion (3 c\u1ea5p \u0111\u1ed9)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Cac_cau_hoi_pho_bien_ve_Accordion_bootstrap\" >C\u00e1c c\u00e2u h\u1ecfi ph\u1ed5 bi\u1ebfn v\u1ec1 Accordion bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c qu\u1ea3n l\u00fd nhi\u1ec1u kh\u1ed1i n\u1ed9i dung d\u00e0i \u0111\u00f4i khi khi\u1ebfn trang tr\u1edf n\u00ean r\u1ed1i m\u1eaft. Accordion l\u00e0 gi\u1ea3i ph\u00e1p g\u1ecdn g\u00e0ng gi\u00fap gom n\u1ed9i dung v\u00e0o t\u1eebng m\u1ee5c, ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 m\u1edf ph\u1ea7n h\u1ecd quan t\u00e2m. Nh\u1edd h\u1ec7 th\u1ed1ng class v\u00e0 plugin Collapse c\u00f3 s\u1eb5n, Bootstrap gi\u00fap b\u1ea1n t\u1ea1o accordion d\u1ec5 d\u00e0ng, \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n v\u00e0 linh ho\u1ea1t t\u00f9y ch\u1ec9nh.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u ngay:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accordion trong Bootstrap l\u00e0 g\u00ec v\u00e0 ho\u1ea1t \u0111\u1ed9ng ra sao<\/li>\n\n\n\n<li>C\u00e1c bi\u1ebfn th\u1ec3 ph\u1ed5 bi\u1ebfn: Default, Flush, Always open<\/li>\n\n\n\n<li>Nh\u1eefng class v\u00e0 thu\u1ed9c t\u00ednh quan tr\u1ecdng khi l\u00e0m vi\u1ec7c v\u1edbi accordion<\/li>\n\n\n\n<li>C\u00e1ch t\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng v\u00e0 \u0111i\u1ec1u khi\u1ec3n b\u1eb1ng JavaScript<\/li>\n\n\n\n<li>C\u00e1c l\u01b0u \u00fd k\u00e8m b\u00e0i t\u1eadp luy\u1ec7n t\u1eadp \u0111\u1ec3 t\u1ef1 tin \u00e1p d\u1ee5ng trong d\u1ef1 \u00e1n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gi\u1edbi-thi\u1ec7u-v\u1ec1-accordion-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Gioi_thieu_ve_Accordion_trong_Bootstrap\"><\/span><strong>Gi\u1edbi thi\u1ec7u v\u1ec1 Accordion trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-la-gi\"><strong>Accordion l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Accordion l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n cho ph\u00e9p gom nhi\u1ec1u kh\u1ed1i n\u1ed9i dung v\u00e0o chung m\u1ed9t nh\u00f3m v\u00e0 hi\u1ec3n th\u1ecb theo c\u01a1 ch\u1ebf thu g\u1ecdn ho\u1eb7c m\u1edf r\u1ed9ng.&nbsp;<\/p>\n\n\n\n<p>M\u1ed7i m\u1ee5c accordion th\u01b0\u1eddng bao g\u1ed3m hai ph\u1ea7n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ti\u00eau \u0111\u1ec1: \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t n\u00fat b\u1ea5m<\/li>\n\n\n\n<li>N\u1ed9i dung: \u0111\u01b0\u1ee3c \u1ea9n \u0111i cho \u0111\u1ebfn khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c.<\/li>\n<\/ul>\n\n\n\n<p>C\u00e1ch b\u1ed1 tr\u00ed n\u00e0y gi\u00fap ti\u1ebft ki\u1ec7m kh\u00f4ng gian hi\u1ec3n th\u1ecb, \u0111\u1ed3ng th\u1eddi t\u1ea1o s\u1ef1 t\u1eadp trung v\u00e0o \u0111\u00fang ph\u1ea7n th\u00f4ng tin m\u00e0 ng\u01b0\u1eddi d\u00f9ng quan t\u00e2m.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5, trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n tr\u00ecnh b\u00e0y ba \u0111o\u1ea1n v\u0103n b\u1ea3n d\u00e0i tr\u00ean c\u00f9ng m\u1ed9t trang. N\u1ebfu vi\u1ebft li\u00ean t\u1ee5c, trang s\u1ebd tr\u1edf n\u00ean r\u1ed1i m\u1eaft v\u00e0 ng\u01b0\u1eddi \u0111\u1ecdc ph\u1ea3i cu\u1ed9n nhi\u1ec1u l\u1ea7n. Khi \u00e1p d\u1ee5ng accordion, ch\u1ec9 ti\u00eau \u0111\u1ec1 c\u1ee7a t\u1eebng \u0111o\u1ea1n hi\u1ec7n ra, n\u1ed9i dung s\u1ebd m\u1edf ra khi b\u1ea5m v\u00e0o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"541\" height=\"409\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-52.png\" alt=\"\" class=\"wp-image-91565\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-52.png 541w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-52-300x227.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-52-200x151.png 200w\" sizes=\"auto, (max-width: 541px) 100vw, 541px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>H\u00ecnh \u1ea3nh minh h\u1ecda v\u1ec1 accordion<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-dung-accordion-c\u1ee7a-bootstrap\"><strong>T\u1ea1i sao n\u00ean d\u00f9ng Accordion c\u1ee7a Bootstrap?<\/strong><\/h3>\n\n\n\n<p>V\u1ec1 nguy\u00ean t\u1eafc, m\u1ed9t accordion c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng ho\u00e0n to\u00e0n th\u1ee7 c\u00f4ng b\u1eb1ng HTML, CSS v\u00e0 JavaScript. L\u1eadp tr\u00ecnh vi\u00ean ch\u1ec9 c\u1ea7n vi\u1ebft c\u1ea5u tr\u00fac ph\u1ea7n t\u1eed, \u0111\u1ecbnh ngh\u0129a hi\u1ec7u \u1ee9ng chuy\u1ec3n ti\u1ebfp v\u00e0 b\u1ed5 sung \u0111o\u1ea1n script \u0111\u1ec3 x\u1eed l\u00fd s\u1ef1 ki\u1ec7n. Tuy nhi\u00ean, c\u00e1ch n\u00e0y th\u01b0\u1eddng t\u1ed1n nhi\u1ec1u th\u1eddi gian, kh\u00f3 b\u1ea3o tr\u00ec v\u00e0 d\u1ec5 g\u00e2y ra s\u1ef1 thi\u1ebfu nh\u1ea5t qu\u00e1n trong giao di\u1ec7n n\u1ebfu \u00e1p d\u1ee5ng cho m\u1ed9t d\u1ef1 \u00e1n l\u1edbn.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 \u0111\u1ec3 t\u1ea1o giao di\u1ec7n nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"198\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-53.png\" alt=\"\" class=\"wp-image-91566\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-53.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-53-300x74.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-53-640x158.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-53-200x49.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-53-768x190.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>C\u00e1ch t\u1ea1o accordion th\u1ee7 c\u00f4ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;div class=\"accordion\"&gt;\n     &lt;div class=\"accordion-item\"&gt;\n       &lt;button class=\"accordion-header\" aria-expanded=\"false\"&gt;\n         Accordion Item #1\n       &lt;\/button&gt;\n       &lt;div class=\"accordion-panel\"&gt;\n         &lt;p&gt;\u0110\u00e2y l\u00e0 n\u1ed9i dung chi ti\u1ebft c\u1ee7a m\u1ee5c s\u1ed1 1. N\u00f3 ch\u1ec9 hi\u1ec3n th\u1ecb khi m\u1ee5c \u0111\u01b0\u1ee3c m\u1edf ra.&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n  \n     &lt;div class=\"accordion-item\"&gt;\n       &lt;button class=\"accordion-header\" aria-expanded=\"false\"&gt;\n         Accordion Item #2\n       &lt;\/button&gt;\n       &lt;div class=\"accordion-panel\"&gt;\n         &lt;p&gt;\u0110\u00e2y l\u00e0 n\u1ed9i dung chi ti\u1ebft c\u1ee7a m\u1ee5c s\u1ed1 2. Ng\u01b0\u1eddi \u0111\u1ecdc c\u00f3 th\u1ec3 m\u1edf ho\u1eb7c \u0111\u00f3ng t\u00f9y \u00fd.&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n  \n     &lt;div class=\"accordion-item\"&gt;\n       &lt;button class=\"accordion-header\" aria-expanded=\"false\"&gt;\n         Accordion Item #3\n       &lt;\/button&gt;\n       &lt;div class=\"accordion-panel\"&gt;\n         &lt;p&gt;\u0110\u00e2y l\u00e0 n\u1ed9i dung chi ti\u1ebft c\u1ee7a m\u1ee5c s\u1ed1 3. Accordion gi\u00fap ti\u1ebft ki\u1ec7m di\u1ec7n t\u00edch trang.&lt;\/p&gt;\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n  \n   &lt;style&gt;\n     .accordion {\n       border: 1px solid #ddd;\n       border-radius: 6px;\n       max-width: 500px;\n       margin: 1rem auto;\n       background: #fff;\n       font-family: sans-serif;\n     }\n     .accordion-item + .accordion-item {\n       border-top: 1px solid #ddd;\n     }\n     .accordion-header {\n       width: 100%;\n       padding: 1rem;\n       text-align: left;\n       background: #f8f9fa;\n       border: none;\n       font-size: 1rem;\n       font-weight: 600;\n       cursor: pointer;\n       position: relative;\n       transition: background 0.2s ease;\n     }\n     .accordion-header:hover {\n       background: #e9ecef;\n     }\n     .accordion-header::after {\n       content: \"\u25b8\";\n       position: absolute;\n       right: 1rem;\n       transition: transform 0.3s ease;\n     }\n     .accordion-item.open .accordion-header::after {\n       transform: rotate(90deg);\n     }\n     .accordion-panel {\n       max-height: 0;\n       overflow: hidden;\n       transition: max-height 0.3s ease;\n       padding: 0 1rem;\n       background: #fff;\n     }\n     .accordion-item.open .accordion-panel {\n       max-height: 200px;\n       padding: 1rem;\n     }\n   &lt;\/style&gt;\n  \n   &lt;script&gt;\n     document.querySelectorAll('.accordion-header').forEach(btn =&gt; {\n       btn.addEventListener('click', () =&gt; {\n         const item = btn.parentElement;\n         const expanded = btn.getAttribute('aria-expanded') === 'true';\n         btn.setAttribute('aria-expanded', !expanded);\n         item.classList.toggle('open');\n       });\n     });\n   &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Trong Bootstrap, to\u00e0n b\u1ed9 c\u1ea5u tr\u00fac, class, hi\u1ec7u \u1ee9ng v\u00e0 h\u00e0nh vi c\u1ee7a accordion \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a s\u1eb5n. L\u1eadp tr\u00ecnh vi\u00ean ch\u1ec9 c\u1ea7n s\u1eed d\u1ee5ng c\u00e1c class nh\u01b0 <strong>.accordion<\/strong>, <strong>.accordion-item, .accordion-button, .accordion-collapse<\/strong> c\u00f9ng v\u1edbi <strong>data-bs-toggle <\/strong>v\u00e0 <strong>data-bs-target<\/strong> l\u00e0 c\u00f3 ngay m\u1ed9t accordion ho\u00e0n ch\u1ec9nh.<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y v\u1eeba r\u00fat ng\u1eafn th\u1eddi gian tri\u1ec3n khai, v\u1eeba b\u1ea3o \u0111\u1ea3m t\u00ednh \u0111\u1ed3ng b\u1ed9 v\u1ec1 m\u1eb7t thi\u1ebft k\u1ebf, v\u00ec accordion s\u1ebd tu\u00e2n theo h\u1ec7 th\u1ed1ng m\u00e0u s\u1eafc, font ch\u1eef v\u00e0 spacing chung c\u1ee7a Bootstrap.<\/p>\n\n\n\n<p>C\u00e1ch t\u1ea1o accordion cho v\u00ed d\u1ee5 tr\u00ean b\u1eb1ng Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"accordion\" id=\"accordionExample\"&gt;\n &lt;!-- Item 1 --&gt;\n &lt;div class=\"accordion-item\"&gt;\n   &lt;h2 class=\"accordion-header\" id=\"headingOne\"&gt;\n     &lt;button class=\"accordion-button collapsed\" type=\"button\"\n             data-bs-toggle=\"collapse\"\n             data-bs-target=\"#collapseOne\"\n             aria-expanded=\"false\"\n             aria-controls=\"collapseOne\"&gt;\n       Accordion Item #1\n     &lt;\/button&gt;\n   &lt;\/h2&gt;\n   &lt;div id=\"collapseOne\" class=\"accordion-collapse collapse\"\n        aria-labelledby=\"headingOne\"\n        data-bs-parent=\"#accordionExample\"&gt;\n     &lt;div class=\"accordion-body\"&gt;\n       \u0110\u00e2y l\u00e0 n\u1ed9i dung chi ti\u1ebft c\u1ee7a m\u1ee5c s\u1ed1 1. N\u00f3 ch\u1ec9 hi\u1ec3n th\u1ecb khi m\u1ee5c \u0111\u01b0\u1ee3c m\u1edf ra.\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n\n\n &lt;!-- Item 2 --&gt;\n &lt;div class=\"accordion-item\"&gt;\n   &lt;h2 class=\"accordion-header\" id=\"headingTwo\"&gt;\n     &lt;button class=\"accordion-button collapsed\" type=\"button\"\n             data-bs-toggle=\"collapse\"\n             data-bs-target=\"#collapseTwo\"\n             aria-expanded=\"false\"\n             aria-controls=\"collapseTwo\"&gt;\n       Accordion Item #2\n     &lt;\/button&gt;\n   &lt;\/h2&gt;\n   &lt;div id=\"collapseTwo\" class=\"accordion-collapse collapse\"\n        aria-labelledby=\"headingTwo\"\n        data-bs-parent=\"#accordionExample\"&gt;\n     &lt;div class=\"accordion-body\"&gt;\n       \u0110\u00e2y l\u00e0 n\u1ed9i dung chi ti\u1ebft c\u1ee7a m\u1ee5c s\u1ed1 2. Ng\u01b0\u1eddi \u0111\u1ecdc c\u00f3 th\u1ec3 m\u1edf ho\u1eb7c \u0111\u00f3ng t\u00f9y \u00fd.\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n\n\n &lt;!-- Item 3 --&gt;\n &lt;div class=\"accordion-item\"&gt;\n   &lt;h2 class=\"accordion-header\" id=\"headingThree\"&gt;\n     &lt;button class=\"accordion-button collapsed\" type=\"button\"\n             data-bs-toggle=\"collapse\"\n             data-bs-target=\"#collapseThree\"\n             aria-expanded=\"false\"\n             aria-controls=\"collapseThree\"&gt;\n       Accordion Item #3\n     &lt;\/button&gt;\n   &lt;\/h2&gt;\n   &lt;div id=\"collapseThree\" class=\"accordion-collapse collapse\"\n        aria-labelledby=\"headingThree\"\n        data-bs-parent=\"#accordionExample\"&gt;\n     &lt;div class=\"accordion-body\"&gt;\n       \u0110\u00e2y l\u00e0 n\u1ed9i dung chi ti\u1ebft c\u1ee7a m\u1ee5c s\u1ed1 3. Accordion gi\u00fap ti\u1ebft ki\u1ec7m di\u1ec7n t\u00edch trang.\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>T\u1eeb minh h\u1ecda tr\u00ean ta c\u00f3 th\u1ec3 th\u1ea5y r\u1eb1ng, vi\u1ec7c d\u00f9ng&nbsp; Accordion c\u1ee7a Bootstrap gi\u00fap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ti\u1ebft ki\u1ec7m th\u1eddi gian tri\u1ec3n khai<\/li>\n\n\n\n<li>\u0110\u1ea3m b\u1ea3o s\u1ef1 \u0111\u1ed3ng b\u1ed9 giao di\u1ec7n<\/li>\n\n\n\n<li>H\u1ed7 tr\u1ee3 s\u1eb5n c\u00e1c y\u1ebfu t\u1ed1 v\u1ec1 hi\u1ec7u \u1ee9ng c\u0169ng nh\u01b0 kh\u1ea3 n\u0103ng truy c\u1eadp<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-c\u01a1-b\u1ea3n-va-cach-ho\u1ea1t-d\u1ed9ng-c\u1ee7a-accordion\"><span class=\"ez-toc-section\" id=\"Cau_truc_co_ban_va_cach_hoat_dong_cua_Accordion\"><\/span><strong>C\u1ea5u tr\u00fac c\u01a1 b\u1ea3n v\u00e0 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a Accordion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-thanh-ph\u1ea7n-chinh-trong-accordion\"><strong>Th\u00e0nh ph\u1ea7n ch\u00ednh trong Accordion<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t accordion trong Bootstrap th\u1ef1c ch\u1ea5t l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p gi\u1eefa nhi\u1ec1u kh\u1ed1i HTML, \u0111\u01b0\u1ee3c t\u1ed5 ch\u1ee9c ch\u1eb7t ch\u1ebd \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh logic v\u00e0 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c. Th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n bao g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.accordion<\/strong>: ph\u1ea7n khung ch\u1ee9a ngo\u00e0i c\u00f9ng, \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t \u201ccontainer\u201d cho to\u00e0n b\u1ed9 accordion. B\u00ean trong n\u00f3, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t m\u1ed9t ho\u1eb7c nhi\u1ec1u <strong>.accordion-item<\/strong><\/li>\n\n\n\n<li><strong>.accordion-item<\/strong>: l\u00e0 t\u1eebng m\u1ee5c (item) ri\u00eang l\u1ebb trong accordion. M\u1ed7i item th\u01b0\u1eddng bao g\u1ed3m ph\u1ea7n ti\u00eau \u0111\u1ec1 v\u00e0 ph\u1ea7n n\u1ed9i dung c\u00f3 th\u1ec3 thu g\u1ecdn\/m\u1edf r\u1ed9ng<\/li>\n\n\n\n<li><strong>.accordion-header v\u00e0 .accordion-button<\/strong>: n\u1eb1m \u1edf ph\u1ea7n tr\u00ean c\u00f9ng c\u1ee7a m\u1ed7i item, \u0111\u00e2y ch\u00ednh l\u00e0 n\u00fat m\u00e0 ng\u01b0\u1eddi d\u00f9ng s\u1ebd click \u0111\u1ec3 m\u1edf ho\u1eb7c \u0111\u00f3ng ph\u1ea7n n\u1ed9i dung b\u00ean d\u01b0\u1edbi. Bootstrap g\u1eafn hi\u1ec7u \u1ee9ng v\u00e0 icon m\u0169i t\u00ean m\u1eb7c \u0111\u1ecbnh th\u00f4ng qua <strong>.accordion-button<\/strong><\/li>\n\n\n\n<li><strong>.accordion-collapse<\/strong> k\u1ebft h\u1ee3p v\u1edbi <strong>.collapse<\/strong>: ch\u00ednh l\u00e0 ph\u1ea7n n\u1ed9i dung c\u00f3 th\u1ec3 thu g\u1ecdn ho\u1eb7c m\u1edf r\u1ed9ng. \u0110\u00e2y l\u00e0 n\u01a1i di\u1ec5n ra hi\u1ec7u \u1ee9ng tr\u01b0\u1ee3t khi ng\u01b0\u1eddi d\u00f9ng thao t\u00e1c<\/li>\n\n\n\n<li><strong>.accordion-body<\/strong>: ph\u1ea7n t\u1eed con b\u00ean trong <strong>.accordion-collapse<\/strong>, l\u00e0 n\u01a1i b\u1ea1n \u0111\u1eb7t n\u1ed9i dung th\u1ef1c t\u1ebf, v\u00ed d\u1ee5 nh\u01b0 v\u0103n b\u1ea3n, danh s\u00e1ch, h\u00ecnh \u1ea3nh ho\u1eb7c b\u1ea5t k\u1ef3 th\u00e0nh ph\u1ea7n HTML n\u00e0o kh\u00e1c.<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"demoAccordion\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"headingOne\"&gt;\n       &lt;button class=\"accordion-button\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\"\n               aria-expanded=\"true\" aria-controls=\"collapseOne\"&gt;\n         M\u1ee5c 1: Gi\u1edbi thi\u1ec7u\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"collapseOne\" class=\"accordion-collapse collapse show\"\n          aria-labelledby=\"headingOne\" data-bs-parent=\"#demoAccordion\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 n\u1ed9i dung b\u00ean trong M\u1ee5c 1. B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t \u0111o\u1ea1n v\u0103n, h\u00ecnh \u1ea3nh ho\u1eb7c b\u1ea5t k\u1ef3 n\u1ed9i dung n\u00e0o kh\u00e1c.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 n\u00e0y:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5n v\u00e0o n\u00fat \u201cM\u1ee5c 1: Gi\u1edbi thi\u1ec7u\u201d, Bootstrap s\u1ebd d\u1ef1a v\u00e0o thu\u1ed9c t\u00ednh data-bs-target \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh panel c\u1ea7n m\u1edf.<\/li>\n\n\n\n<li>Class .show ban \u0111\u1ea7u \u0111\u01b0\u1ee3c th\u00eam v\u00e0o \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh r\u1eb1ng panel n\u00e0y m\u1eb7c \u0111\u1ecbnh \u0111ang m\u1edf khi trang t\u1ea3i l\u1ea7n \u0111\u1ea7u.<\/li>\n<\/ul>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n qu\u1ea3:<\/p>\n\n\n\n<p><em>L\u00fac \u0111\u00f3ng n\u1ed9i dung:<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"75\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54.png\" alt=\"\" class=\"wp-image-91567\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54-300x28.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54-640x60.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54-200x19.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54-768x72.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-54-1536x144.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><em>L\u00fac m\u1edf n\u1ed9i dung:<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"114\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55.png\" alt=\"\" class=\"wp-image-91568\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55-300x43.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55-640x91.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55-200x29.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55-768x109.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-55-1536x219.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u01a1-ch\u1ebf-ho\u1ea1t-d\u1ed9ng-c\u1ee7a-accordion-bootstrap\"><strong>C\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng c\u1ee7a Accordion Bootstrap<\/strong><\/h3>\n\n\n\n<p>Accordion trong Bootstrap v\u1eadn h\u00e0nh d\u1ef1a tr\u00ean plugin Collapse. Khi b\u1ea1n nh\u1ea5n v\u00e0o m\u1ed9t n\u00fat <strong>.accordion-button<\/strong>, Bootstrap s\u1ebd ki\u1ec3m tra panel li\u00ean k\u1ebft qua <strong>data-bs-target<\/strong> ho\u1eb7c <strong>aria-controls<\/strong>. Sau \u0111\u00f3, n\u00f3 \u0111\u01a1n gi\u1ea3n l\u00e0 th\u00eam ho\u1eb7c g\u1ee1 class <strong>.show<\/strong> \u1edf ph\u1ea7n <strong>.accordion-collapse<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>N\u1ebfu c\u00f3 <strong>.show<\/strong>: panel m\u1edf, hi\u1ec3n th\u1ecb n\u1ed9i dung k\u00e8m hi\u1ec7u \u1ee9ng tr\u01b0\u1ee3t xu\u1ed1ng<\/li>\n\n\n\n<li>N\u1ebfu b\u1ecf <strong>.show<\/strong>: panel \u0111\u00f3ng, n\u1ed9i dung thu g\u1ecdn l\u1ea1i<\/li>\n<\/ul>\n\n\n\n<p>Thu\u1ed9c t\u00ednh <strong>data-bs-parent<\/strong> gi\u00fap ki\u1ec3m so\u00e1t h\u00e0nh vi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00f3 <strong>data-bs-parent<\/strong>: m\u1edf m\u1ee5c m\u1edbi s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u00f3ng m\u1ee5c \u0111ang m\u1edf<\/li>\n\n\n\n<li>Kh\u00f4ng c\u00f3 <strong>data-bs-parent<\/strong>: b\u1ea1n c\u00f3 th\u1ec3 m\u1edf nhi\u1ec1u m\u1ee5c c\u00f9ng l\u00fac<\/li>\n<\/ul>\n\n\n\n<p>Nh\u1edd c\u01a1 ch\u1ebf n\u00e0y, accordion tr\u1edf n\u00ean tr\u1ef1c quan v\u00e0 d\u1ec5 d\u00f9ng m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft th\u00eam JavaScript th\u1ee7 c\u00f4ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-bi\u1ebfn-th\u1ec3-accordion-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_bien_the_Accordion_trong_Bootstrap\"><\/span><strong>C\u00e1c bi\u1ebfn th\u1ec3 Accordion trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1ed9t trong nh\u1eefng \u01b0u \u0111i\u1ec3m l\u1edbn c\u1ee7a Bootstrap l\u00e0 ngo\u00e0i phi\u00ean b\u1ea3n Accordion m\u1eb7c \u0111\u1ecbnh, b\u1ea1n c\u00f2n c\u00f3 th\u1ec3 t\u00f9y ch\u1ecdn m\u1ed9t s\u1ed1 bi\u1ebfn th\u1ec3 \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi t\u1eebng ng\u1eef c\u1ea3nh thi\u1ebft k\u1ebf. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ba bi\u1ebfn th\u1ec3 ph\u1ed5 bi\u1ebfn nh\u1ea5t m\u00e0 Bootstrap h\u1ed7 tr\u1ee3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-m\u1eb7c-d\u1ecbnh\"><strong>Accordion m\u1eb7c \u0111\u1ecbnh<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 d\u1ea1ng c\u01a1 b\u1ea3n v\u00e0 c\u0169ng \u0111\u01b0\u1ee3c d\u00f9ng nhi\u1ec1u nh\u1ea5t. M\u1ed7i m\u1ee5c trong accordion s\u1ebd c\u00f3 ti\u00eau \u0111\u1ec1 (header) k\u00e8m n\u00fat <strong>.accordion-button<\/strong>, khi nh\u1ea5n v\u00e0o s\u1ebd m\u1edf ph\u1ea7n n\u1ed9i dung b\u00ean d\u01b0\u1edbi.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"accordionDefault\"&gt;\n   &lt;!-- Item 1 --&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"headingOne\"&gt;\n       &lt;button class=\"accordion-button\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\"\n               aria-expanded=\"true\" aria-controls=\"collapseOne\"&gt;\n         Ti\u00eau \u0111\u1ec1 #1\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"collapseOne\" class=\"accordion-collapse collapse show\"\n          aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionDefault\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         N\u1ed9i dung m\u1ee5c 1.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n    &lt;!-- Item 2 --&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"headingTwo\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\"\n               aria-expanded=\"false\" aria-controls=\"collapseTwo\"&gt;\n         Ti\u00eau \u0111\u1ec1 #2\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"collapseTwo\" class=\"accordion-collapse collapse\"\n          aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionDefault\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         N\u1ed9i dung m\u1ee5c 2.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"154\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56.png\" alt=\"\" class=\"wp-image-91569\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56-300x58.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56-640x123.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56-200x39.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56-768x148.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-56-1536x296.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-flush\"><strong>Accordion Flush<\/strong><\/h3>\n\n\n\n<p>Ngo\u00e0i phi\u00ean b\u1ea3n m\u1eb7c \u0111\u1ecbnh v\u1edbi border v\u00e0 background r\u00f5 r\u00e0ng, Bootstrap c\u00f2n h\u1ed7 tr\u1ee3 bi\u1ebfn th\u1ec3 Accordion Flush. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh l\u00e0 accordion flush lo\u1ea1i b\u1ecf border ngo\u00e0i c\u00f9ng v\u00e0 background m\u1eb7c \u0111\u1ecbnh, t\u1ea1o c\u1ea3m gi\u00e1c \u201cph\u1eb3ng\u201d v\u00e0 li\u1ec1n m\u1ea1ch h\u01a1n.<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p: th\u00eam class<strong> .accordion-flush<\/strong> v\u00e0o container accordion.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion accordion-flush\" id=\"accordionFlushExample\"&gt;\n   ...\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion accordion-flush\" id=\"accordionFlushExample\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"flush-headingOne\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseOne\"\n               aria-expanded=\"false\" aria-controls=\"flush-collapseOne\"&gt;\n         C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p #1\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"flush-collapseOne\" class=\"accordion-collapse collapse\"\n          aria-labelledby=\"flush-headingOne\" data-bs-parent=\"#accordionFlushExample\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 ph\u1ea7n n\u1ed9i dung tr\u1ea3 l\u1eddi cho c\u00e2u h\u1ecfi s\u1ed1 1. Accordion flush lo\u1ea1i b\u1ecf border ngo\u00e0i n\u00ean ph\u1ea7n n\u00e0y nh\u00ecn s\u1ebd ph\u1eb3ng h\u01a1n so v\u1edbi m\u1eb7c \u0111\u1ecbnh.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"flush-headingTwo\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#flush-collapseTwo\"\n               aria-expanded=\"false\" aria-controls=\"flush-collapseTwo\"&gt;\n         C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p #2\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"flush-collapseTwo\" class=\"accordion-collapse collapse\"\n          aria-labelledby=\"flush-headingTwo\" data-bs-parent=\"#accordionFlushExample\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 n\u1ed9i dung cho c\u00e2u h\u1ecfi s\u1ed1 2.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"158\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57.png\" alt=\"\" class=\"wp-image-91570\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57-300x59.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57-640x126.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57-200x40.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57-768x152.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-57-1536x303.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Ki\u1ec3u n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n t\u00edch h\u1ee3p accordion v\u00e0o b\u00ean trong m\u1ed9t khu v\u1ef1c kh\u00e1c (v\u00ed d\u1ee5: sidebar, danh s\u00e1ch filter, menu \u0111i\u1ec1u h\u01b0\u1edbng) m\u00e0 kh\u00f4ng mu\u1ed1n accordion tr\u00f4ng \u201cc\u1ed3ng k\u1ec1nh\u201d v\u1edbi qu\u00e1 nhi\u1ec1u \u0111\u01b0\u1eddng vi\u1ec1n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-always-open\"><strong>Accordion Always Open<\/strong><\/h3>\n\n\n\n<p>Theo m\u1eb7c \u0111\u1ecbnh, Bootstrap s\u1ebd ch\u1ec9 cho ph\u00e9p m\u1ed9t item m\u1edf c\u00f9ng l\u00fac trong m\u1ed9t accordion. Khi m\u1edf m\u1ee5c m\u1edbi, m\u1ee5c c\u0169 s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u00f3ng l\u1ea1i. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c \u0111i\u1ec1u khi\u1ec3n nh\u1edd thu\u1ed9c t\u00ednh <strong>data-bs-parent<\/strong>.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, c\u00f3 nh\u1eefng t\u00ecnh hu\u1ed1ng b\u1ea1n mu\u1ed1n cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng m\u1edf nhi\u1ec1u m\u1ee5c c\u00f9ng l\u00fac (multi-expand). V\u00ed d\u1ee5: m\u1ed9t danh m\u1ee5c filter trong e-commerce n\u01a1i ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 \u0111\u1ed3ng th\u1eddi m\u1edf \u201cK\u00edch th\u01b0\u1edbc\u201d, \u201cM\u00e0u s\u1eafc\u201d, \u201cGi\u00e1\u201d.<\/p>\n\n\n\n<p>\u0110\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y, b\u1ea1n ch\u1ec9 c\u1ea7n b\u1ecf thu\u1ed9c t\u00ednh <strong>data-bs-parent<\/strong> ra kh\u1ecfi c\u00e1c accordion-collapse.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"accordionAlwaysOpen\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"always-headingOne\"&gt;\n       &lt;button class=\"accordion-button\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#always-collapseOne\"\n               aria-expanded=\"true\" aria-controls=\"always-collapseOne\"&gt;\n         B\u1ed9 l\u1ecdc: K\u00edch th\u01b0\u1edbc\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"always-collapseOne\" class=\"accordion-collapse collapse show\"\n          aria-labelledby=\"always-headingOne\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         N\u1ed9i dung b\u1ed9 l\u1ecdc k\u00edch th\u01b0\u1edbc.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"always-headingTwo\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#always-collapseTwo\"\n               aria-expanded=\"false\" aria-controls=\"always-collapseTwo\"&gt;\n         B\u1ed9 l\u1ecdc: M\u00e0u s\u1eafc\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"always-collapseTwo\" class=\"accordion-collapse collapse\"\n          aria-labelledby=\"always-headingTwo\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         N\u1ed9i dung b\u1ed9 l\u1ecdc m\u00e0u s\u1eafc.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: c\u1ea3 hai panel c\u00f3 th\u1ec3 m\u1edf c\u00f9ng l\u00fac m\u00e0 kh\u00f4ng \u0111\u00f3ng l\u1eabn nhau.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"198\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58.png\" alt=\"\" class=\"wp-image-91571\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58-300x74.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58-640x158.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58-200x50.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58-768x190.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-58-1536x380.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-nhom-thu\u1ed9c-tinh-va-class-chinh-trong-accordion\"><span class=\"ez-toc-section\" id=\"Cac_nhom_thuoc_tinh_va_class_chinh_trong_Accordion\"><\/span><strong>C\u00e1c nh\u00f3m thu\u1ed9c t\u00ednh v\u00e0 class ch\u00ednh trong Accordion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-class-di\u1ec1u-khi\u1ec3n-tr\u1ea1ng-thai\"><strong>Class \u0111i\u1ec1u khi\u1ec3n tr\u1ea1ng th\u00e1i<\/strong><\/h3>\n\n\n\n<p>Trong Accordion, Bootstrap s\u1eed d\u1ee5ng m\u1ed9t s\u1ed1 class quan tr\u1ecdng \u0111\u1ec3 quy\u1ebft \u0111\u1ecbnh tr\u1ea1ng th\u00e1i m\u1edf\/\u0111\u00f3ng c\u1ee7a panel v\u00e0 n\u00fat toggle. Khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5n, Bootstrap s\u1ebd t\u1ef1 \u0111\u1ed9ng th\u00eam\/b\u1edbt c\u00e1c class n\u00e0y \u0111\u1ec3 hi\u1ec3n th\u1ecb \u0111\u00fang tr\u1ea1ng th\u00e1i.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class<\/strong><\/td><td><strong>Vai tr\u00f2<\/strong><\/td><td><strong>Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng<\/strong><\/td><\/tr><tr><td><strong><code>.accordion-button<\/code><\/strong><\/td><td>Class g\u1ed1c cho n\u00fat toggle (lu\u00f4n c\u00f3)<\/td><td>N\u00fat m\u1edf\/\u0111\u00f3ng panel<\/td><\/tr><tr><td><strong><code>.accordion-button.collapsed<\/code><\/strong><\/td><td>G\u1eafn v\u00e0o khi panel \u0111ang \u0111\u00f3ng<\/td><td>Xu\u1ea5t hi\u1ec7n khi panel \u0111ang \u0111\u00f3ng. Caret quay ngang sang ph\u1ea3i.<\/td><\/tr><tr><td><strong><code>.accordion-collapse.collapse<\/code><\/strong><\/td><td>Container c\u1ee7a panel n\u1ed9i dung b\u1ecb \u1ea9n<\/td><td>N\u1ed9i dung \u1ea9n theo m\u1eb7c \u0111\u1ecbnh<\/td><\/tr><tr><td><strong><code>.accordion-collapse.collapse.show<\/code><\/strong><\/td><td>Container c\u1ee7a panel n\u1ed9i dung \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb<\/td><td>Hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 n\u1ed9i dung<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-qu\u1ea3n-ly-icon-va-tr\u1ea1ng-thai-nut\"><strong>Qu\u1ea3n l\u00fd icon v\u00e0 tr\u1ea1ng th\u00e1i n\u00fat<\/strong><\/h3>\n\n\n\n<p>Trong Accordion, vi\u1ec7c hi\u1ec3n th\u1ecb icon v\u00e0 c\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i n\u00fat khi m\u1edf\/\u0111\u00f3ng panel \u0111\u01b0\u1ee3c \u0111i\u1ec1u khi\u1ec3n ho\u00e0n to\u00e0n b\u1eb1ng class CSS k\u1ebft h\u1ee3p v\u1edbi thu\u1ed9c t\u00ednh aria. Bootstrap s\u1eed d\u1ee5ng <strong>pseudo-element ::after<\/strong> \u0111\u1ec3 t\u1ea1o ra icon m\u1eb7c \u0111\u1ecbnh (caret m\u0169i t\u00ean), v\u00e0 d\u1ef1a v\u00e0o c\u00e1c class <strong>.collapsed<\/strong> ho\u1eb7c <strong>.show<\/strong> \u0111\u1ec3 thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 CSS \u0111\u1ec3 thay th\u1ebf caret m\u1eb7c \u0111\u1ecbnh b\u1eb1ng k\u00fd hi\u1ec7u kh\u00e1c (v\u00ed d\u1ee5 \u201c+ \/ \u2013\u201d):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.accordion-button::after {\n   background-image: none;\n   content: '+';\n}\n\n\n.accordion-button:not(.collapsed)::after {\n   background-image: none;\n   content: '\u2013';\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"112\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59.png\" alt=\"\" class=\"wp-image-91572\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59-300x42.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59-640x90.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59-200x28.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59-768x108.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-59-1536x215.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessibility-trong-accordion\"><strong>Accessibility trong Accordion<\/strong><\/h3>\n\n\n\n<p>Accordion l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n t\u01b0\u01a1ng t\u00e1c (interactive component), v\u00ec v\u1eady Bootstrap \u0111\u00e3 t\u00edch h\u1ee3p s\u1eb5n nhi\u1ec1u thu\u1ed9c t\u00ednh aria \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 thao t\u00e1c d\u1ec5 d\u00e0ng k\u1ec3 c\u1ea3 v\u1edbi screen reader ho\u1eb7c b\u00e0n ph\u00edm.<\/p>\n\n\n\n<p>C\u00e1c thu\u1ed9c t\u00ednh aria quan tr\u1ecdng<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Thu\u1ed9c t\u00ednh<\/strong><\/td><td><strong>\u00c1p d\u1ee5ng cho<\/strong><\/td><td><strong>Gi\u00e1 tr\u1ecb \u0111i\u1ec3n h\u00ecnh<\/strong><\/td><td><strong>\u00dd ngh\u0129a<\/strong><\/td><\/tr><tr><td>aria-expanded<\/td><td>.accordion-button<\/td><td>true \/ false<\/td><td>X\u00e1c \u0111\u1ecbnh tr\u1ea1ng th\u00e1i panel: m\u1edf (true) ho\u1eb7c \u0111\u00f3ng (false). Gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c Bootstrap c\u1eadp nh\u1eadt t\u1ef1 \u0111\u1ed9ng khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5n n\u00fat.<\/td><\/tr><tr><td>aria-controls<\/td><td>.accordion-button<\/td><td>id c\u1ee7a panel<\/td><td>Li\u00ean k\u1ebft n\u00fat \u0111i\u1ec1u khi\u1ec3n v\u1edbi ph\u1ea7n n\u1ed9i dung .accordion-collapse m\u00e0 n\u00f3 qu\u1ea3n l\u00fd.<\/td><\/tr><tr><td>aria-labelledby<\/td><td>.accordion-collapse<\/td><td>id c\u1ee7a header<\/td><td>Li\u00ean k\u1ebft n\u1ed9i dung panel v\u1edbi ti\u00eau \u0111\u1ec1 (header) ch\u1ee9a n\u00fat toggle, gi\u00fap screen reader hi\u1ec3u quan h\u1ec7 m\u00f4 t\u1ea3.<\/td><\/tr><tr><td>role=\u201cbutton\u201d<\/td><td>Th\u1ebb &lt;button&gt; ho\u1eb7c ph\u1ea7n t\u1eed thay th\u1ebf<\/td><td>button<\/td><td>X\u00e1c \u0111\u1ecbnh ph\u1ea7n t\u1eed l\u00e0 m\u1ed9t n\u00fat b\u1ea5m. N\u1ebfu kh\u00f4ng d\u00f9ng &lt;button&gt; th\u1eadt s\u1ef1 (v\u00ed d\u1ee5 &lt;a&gt;), c\u1ea7n th\u00eam role=\u201cbutton\u201d \u0111\u1ec3 screen reader hi\u1ec3u \u0111\u00fang.<\/td><\/tr><tr><td>tabindex<\/td><td>&lt;a&gt; ho\u1eb7c &lt;div&gt; (n\u1ebfu kh\u00f4ng d\u00f9ng &lt;button&gt;)<\/td><td>0,1,2,..<\/td><td>Cho ph\u00e9p ph\u1ea7n t\u1eed focus b\u1eb1ng b\u00e0n ph\u00edm.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>L\u01b0u \u00fd, khi d\u00f9ng \u0111\u00fang c\u00fa ph\u00e1p Bootstrap (&lt;button class=\u201caccordion-button\u201d&gt;), h\u1ea7u h\u1ebft c\u00e1c thu\u1ed9c t\u00ednh aria \u0111\u01b0\u1ee3c th\u00eam v\u00e0 qu\u1ea3n l\u00fd t\u1ef1 \u0111\u1ed9ng.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ec9nh-d\u1ecbnh-d\u1ea1ng-c\u1ee7a-accordion-bootstrap\"><strong>T\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng c\u1ee7a Accordion Bootstrap<\/strong><\/h3>\n\n\n\n<p>Bootstrap cung c\u1ea5p s\u1eb5n nhi\u1ec1u class ti\u1ec7n \u00edch (utility classes) v\u00e0 CSS variables \u0111\u1ec3 b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh giao di\u1ec7n c\u1ee7a Accordion m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u CSS th\u1ee7 c\u00f4ng. Vi\u1ec7c n\u00e0y gi\u00fap d\u1ec5 d\u00e0ng thay \u0111\u1ed5i m\u00e0u s\u1eafc, vi\u1ec1n, bo g\u00f3c ho\u1eb7c kho\u1ea3ng c\u00e1ch theo ng\u1eef c\u1ea3nh thi\u1ebft k\u1ebf.<\/p>\n\n\n\n<p>C\u00f3 2 c\u00e1ch \u0111\u1ec3 b\u1ea1n t\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng cho accordion:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-class-ti\u1ec7n-ich-c\u1ee7a-bootstrap\"><strong>D\u00f9ng class ti\u1ec7n \u00edch c\u1ee7a Bootstrap<\/strong><\/h4>\n\n\n\n<p>Bootstrap c\u00f3 s\u1eb5n nhi\u1ec1u class \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i \u0111\u1ecbnh d\u1ea1ng c\u1ee7a m\u00e0u s\u1eafc, vi\u1ec1n, bo g\u00f3c, kho\u1ea3ng c\u00e1ch,&#8230; m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft CSS. V\u00ed d\u1ee5 m\u1ed9t s\u1ed1 class th\u01b0\u1eddng d\u00f9ng:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.accordion-flush<\/strong>: lo\u1ea1i b\u1ecf vi\u1ec1n v\u00e0 bo g\u00f3c ngo\u00e0i, cho c\u1ea3m gi\u00e1c \u201cph\u1eb3ng\u201d, s\u00e1t m\u00e9p container<\/li>\n\n\n\n<li><strong>.border, .border-0, .rounded, .rounded-0<\/strong>: b\u1eadt\/t\u1eaft vi\u1ec1n, thay \u0111\u1ed5i bo g\u00f3c cho to\u00e0n accordion ho\u1eb7c t\u1eebng item<\/li>\n\n\n\n<li><strong>.bg-*, .text-*<\/strong>: \u0111\u1ed5i m\u00e0u n\u1ec1n v\u00e0 m\u00e0u ch\u1eef cho header ho\u1eb7c n\u00fat toggle (v\u00ed d\u1ee5 .bg-primary .text-white). \u0110\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/itviec.com\/blog\/bootstrap-color-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap color<\/a><\/li>\n\n\n\n<li><strong>.shadow-sm, .shadow, .shadow-lg<\/strong>: th\u00eam b\u00f3ng \u0111\u1ed5, gi\u00fap accordion n\u1ed5i b\u1eadt tr\u00ean n\u1ec1n<\/li>\n\n\n\n<li><strong>p-*, px-*, py-*, mb-*<\/strong>: tu\u1ef3 ch\u1ec9nh padding\/margin nhanh ch\u00f3ng (\u0111\u1ecdc th\u00eam v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng <a href=\"https:\/\/itviec.com\/blog\/padding-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Padding Bootstrap<\/a>)<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion shadow-sm border rounded\" id=\"accUtil\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"uHead\"&gt;\n       &lt;button class=\"accordion-button bg-primary text-white\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#uBody\"\n               aria-expanded=\"true\" aria-controls=\"uBody\"&gt;\n         Accordion v\u1edbi class ti\u1ec7n \u00edch\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"uBody\" class=\"accordion-collapse collapse show\" aria-labelledby=\"uHead\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         Accordion n\u00e0y s\u1eed d\u1ee5ng border, rounded, shadow v\u00e0 m\u00e0u n\u1ec1n xanh cho n\u00fat.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"118\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60.png\" alt=\"\" class=\"wp-image-91573\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60-300x44.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60-640x94.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60-200x30.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60-768x113.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-60-1536x227.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dung-css-tuy-ch\u1ec9nh\"><strong>D\u00f9ng CSS t\u00f9y ch\u1ec9nh<\/strong><\/h4>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft c\u00e1c class CSS ri\u00eang v\u00e0 ghi \u0111\u00e8 l\u00ean style m\u00e0 Bootstrap \u0111\u1ecbnh ngh\u0129a s\u1eb5n. V\u00ed d\u1ee5, \u0111\u1ed5i m\u00e0u n\u1ec1n, m\u00e0u ch\u1eef v\u00e0 bo g\u00f3c c\u1ee7a header accordion:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n.custom-accordion .accordion-button {\n background-color: #4a148c;\n color: #fff;\n border-radius: 12px;\n}\n\n\n.custom-accordion .accordion-button:not(.collapsed) {\n background-color: #6a1b9a;\n color: #fff;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>V\u00e0 s\u1eed d\u1ee5ng trong accordion:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion custom-accordion\" id=\"accordionCustom\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"headingCustom\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\"\n               data-bs-toggle=\"collapse\" data-bs-target=\"#collapseCustom\"\n               aria-expanded=\"false\" aria-controls=\"collapseCustom\"&gt;\n         Accordion tu\u1ef3 ch\u1ec9nh\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"collapseCustom\" class=\"accordion-collapse collapse\"\n          aria-labelledby=\"headingCustom\" data-bs-parent=\"#accordionCustom\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 accordion c\u00f3 m\u00e0u n\u1ec1n t\u00edm \u0111\u1eadm v\u00e0 ch\u1eef tr\u1eafng, do tu\u1ef3 ch\u1ec9nh b\u1eb1ng CSS.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"115\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61.png\" alt=\"\" class=\"wp-image-91574\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61-300x43.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61-640x92.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61-200x29.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61-768x110.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-61-1536x221.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>N\u1ebfu b\u1ea1n \u0111ang s\u1eed d\u1ee5ng Bootstrap th\u00f4ng qua b\u1ea3n source Sass, vi\u1ec7c tu\u1ef3 ch\u1ec9nh s\u1ebd linh ho\u1ea1t h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 bi\u1ebfn Sass c\u1ee7a accordion \u0111\u1ec3 thay \u0111\u1ed5i giao di\u1ec7n ngay t\u1eeb l\u00fac build. V\u00ed d\u1ee5: ch\u1ec9nh l\u1ea1i padding, m\u00e0u active v\u00e0 m\u00e0u icon c\u1ee7a accordion:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Custom Bootstrap\n@import \"bootstrap\/functions\";\n@import \"bootstrap\/variables\";   \/\/ Bi\u1ebfn g\u1ed1c\n@import \"bootstrap\/mixins\";\n\n\n\/\/ Ghi \u0111\u00e8 bi\u1ebfn \u1edf \u0111\u00e2y\n$accordion-button-padding-y: 1rem;\n$accordion-button-padding-x: 2rem;\n$accordion-button-color: #fff;\n$accordion-button-bg: #4a148c;\n$accordion-button-active-bg: #6a1b9a;\n$accordion-icon-color: #fff;\n$accordion-icon-active-color: #ffeb3b;\n\n\n\/\/ Build l\u1ea1i Bootstrap\n@import \"bootstrap\";\n<\/code><\/pre>\n\n\n\n<p>Khi bi\u00ean d\u1ecbch l\u1ea1i, to\u00e0n b\u1ed9 accordion trong d\u1ef1 \u00e1n s\u1ebd c\u00f3 padding r\u1ed9ng h\u01a1n, n\u1ec1n t\u00edm, ch\u1eef tr\u1eafng, v\u00e0 icon khi m\u1edf s\u1ebd chuy\u1ec3n sang m\u00e0u v\u00e0ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-lam-vi\u1ec7c-v\u1edbi-accordion-b\u1eb1ng-javascript\"><span class=\"ez-toc-section\" id=\"Lam_viec_voi_Accordion_bang_JavaScript\"><\/span><strong>L\u00e0m vi\u1ec7c v\u1edbi Accordion b\u1eb1ng JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>M\u1eb7c \u0111inh, Accordion c\u1ee7a Bootstrap ho\u1ea1t \u0111\u1ed9ng d\u1ef1a tr\u00ean collapse plugin. Ch\u00fang ta c\u00f3 th\u1ec3 d\u00f9ng data attributes \u0111\u1ec3 thao t\u00e1c m\u00e0 kh\u00f4ng c\u1ea7n d\u00f9ng \u0111\u1ebfn code Javascript. Tuy nhi\u00ean, trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p m\u00e0 b\u1ea1n c\u1ea7n ki\u1ec3m so\u00e1t s\u00e2u h\u01a1n \u0111\u1ed1i v\u1edbi accordion, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng javascript api \u0111\u1ec3 thao t\u00e1c.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0110\u1ea7u ti\u00ean, \u0111\u1ec3 thao t\u00e1c v\u1edbi accordion b\u1eb1ng js, b\u1ea1n c\u1ea7n kh\u1edfi t\u1ea1o 1 instance c\u1ee7a n\u00f3:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n const myEl = document.getElementById('collapseId');\n const myCollapse = new bootstrap.Collapse(myEl, { toggle: false });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Trong \u0111\u00f3, \u201ccollapseId\u201d l\u00e0 id c\u1ee7a accordion c\u1ea7n thao t\u00e1c.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Sau \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 g\u1ecdi c\u00e1c method \u0111\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi accordion th\u00f4ng qua instance nh\u01b0:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Method<\/strong><\/td><td><strong>T\u00e1c d\u1ee5ng<\/strong><\/td><\/tr><tr><td><strong>.show()<\/strong><\/td><td>M\u1edf panel<\/td><\/tr><tr><td><strong>.hide()<\/strong><\/td><td>\u0110\u00f3ng panel<\/td><\/tr><tr><td><strong>.toggle()<\/strong><\/td><td>Chuy\u1ec3n tr\u1ea1ng th\u00e1i (\u0111\u00f3ng\/m\u1edf)<\/td><\/tr><tr><td><strong>.dispose()<\/strong><\/td><td>Xo\u00e1 data g\u1eafn tr\u00ean DOM<\/td><\/tr><tr><td><strong>getInstance(el)<\/strong><\/td><td>L\u1ea5y instance \u0111\u00e3 t\u1ed3n t\u1ea1i<\/td><\/tr><tr><td><strong>getOrCreateInstance(el)<\/strong><\/td><td>L\u1ea5y instance n\u1ebfu c\u00f3, n\u1ebfu ch\u01b0a s\u1ebd kh\u1edfi t\u1ea1o m\u1edbi<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5, thao t\u00e1c \u0111\u1ec3 accordion m\u1edf panel n\u1ed9i dung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> const myEl = document.getElementById('collapseOne');\n const myCollapse = new bootstrap.Collapse(myEl, { toggle: false });\n myCollapse.show();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-m\u1ed9t-s\u1ed1-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-accordion-bootstrap\"><span class=\"ez-toc-section\" id=\"Mot_so_luu_y_khi_su_dung_Accordion_Bootstrap\"><\/span><strong>M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng Accordion Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Accordion l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n ti\u1ec7n l\u1ee3i, gi\u00fap t\u1ed1i \u01b0u kh\u00f4ng gian v\u00e0 t\u1ed5 ch\u1ee9c n\u1ed9i dung khoa h\u1ecdc. Tuy nhi\u00ean, n\u1ebfu tri\u1ec3n khai kh\u00f4ng \u0111\u00fang c\u00e1ch, n\u00f3 c\u00f3 th\u1ec3 g\u00e2y r\u1ed1i m\u1eaft ho\u1eb7c l\u00e0m gi\u1ea3m tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 \u0111i\u1ec3m quan tr\u1ecdng m\u00e0 anh em dev n\u00ean l\u01b0u \u00fd khi l\u00e0m vi\u1ec7c v\u1edbi Accordion trong Bootstrap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kh\u00f4ng nh\u1ed3i nh\u00e9t qu\u00e1 nhi\u1ec1u n\u1ed9i dung:<\/strong> Accordion ph\u00f9 h\u1ee3p \u0111\u1ec3 \u1ea9n\/hi\u1ec7n th\u00f4ng tin theo nh\u00f3m nh\u01b0ng n\u1ebfu \u0111\u1eb7t n\u1ed9i dung qu\u00e1 d\u00e0i ho\u1eb7c qu\u00e1 nhi\u1ec1u t\u1ea7ng l\u1ed3ng nhau, ng\u01b0\u1eddi d\u00f9ng s\u1ebd kh\u00f3 theo d\u00f5i v\u00e0 tr\u1ea3i nghi\u1ec7m k\u00e9m<\/li>\n\n\n\n<li><strong>\u0110\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n giao di\u1ec7n:<\/strong> M\u1ed7i accordion n\u00ean c\u00f3 c\u1ea5u tr\u00fac r\u00f5 r\u00e0ng: ti\u00eau \u0111\u1ec1 \u2192 n\u00fat m\u1edf\/\u0111\u00f3ng \u2192 n\u1ed9i dung. Tr\u00e1nh t\u1ef1 \u00fd thay \u0111\u1ed5i qu\u00e1 nhi\u1ec1u khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng kh\u00f3 nh\u1eadn di\u1ec7n<\/li>\n\n\n\n<li><strong>Quan t\u00e2m \u0111\u1ebfn accessibility:<\/strong> \u0110\u1ea3m b\u1ea3o c\u00e1c thu\u1ed9c t\u00ednh aria (aria-expanded, aria-controls, aria-labelledby) \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u00fang. \u0110i\u1ec1u n\u00e0y gi\u00fap ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng screen reader ho\u1eb7c b\u00e0n ph\u00edm v\u1eabn \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u01b0\u1ee3c<\/li>\n\n\n\n<li><strong>Ki\u1ec3m so\u00e1t s\u1ed1 l\u01b0\u1ee3ng accordion tr\u00ean trang:<\/strong> N\u1ebfu tr\u00ean m\u1ed9t trang c\u00f3 qu\u00e1 nhi\u1ec1u accordion, ng\u01b0\u1eddi d\u00f9ng s\u1ebd b\u1ecb ph\u00e2n t\u00e1n. H\u00e3y c\u00e2n nh\u1eafc nh\u00f3m n\u1ed9i dung ho\u1eb7c thay b\u1eb1ng tab\/nav n\u1ebfu ph\u00f9 h\u1ee3p h\u01a1n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-s\u1eed-d\u1ee5ng-accordion-3-c\u1ea5p-d\u1ed9\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_su_dung_Accordion_3_cap_do\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng Accordion (3 c\u1ea5p \u0111\u1ed9)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a Accordion trong Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 th\u1eed t\u1ef1 tay x\u00e2y d\u1ef1ng c\u00e1c accordion trong Bootstrap theo ba c\u1ea5p \u0111\u1ed9 d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-1\"><strong>B\u00e0i t\u1eadp 1<\/strong><\/h3>\n\n\n\n<p><strong>T\u1ea1o m\u1ed9t accordion c\u00f3 3 m\u1ee5c. Khi load trang, m\u1ee5c \u0111\u1ea7u ti\u00ean m\u1edf s\u1eb5n, c\u00e1c m\u1ee5c kh\u00e1c \u0111\u00f3ng.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"199\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62.png\" alt=\"\" class=\"wp-image-91576\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62-300x75.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62-640x159.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62-200x50.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62-768x191.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-62-1536x382.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<p>X\u00e2y d\u1ef1ng accordion v\u1edbi c\u1ea5u tr\u00fac nguy\u00ean b\u1ea3n v\u1edbi class <strong>.show<\/strong> \u0111\u1ec3 m\u1edf m\u1eb7c \u0111\u1ecbnh m\u1ee5c 1.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"accordionBasic\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\"&gt;\n       &lt;button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\"\n               data-bs-target=\"#basicOne\" aria-expanded=\"true\" aria-controls=\"basicOne\"&gt;\n         M\u1ee5c 1\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"basicOne\" class=\"accordion-collapse collapse show\" data-bs-parent=\"#accordionBasic\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 n\u1ed9i dung c\u1ee7a m\u1ee5c 1.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\n               data-bs-target=\"#basicTwo\" aria-expanded=\"false\" aria-controls=\"basicTwo\"&gt;\n         M\u1ee5c 2\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"basicTwo\" class=\"accordion-collapse collapse\" data-bs-parent=\"#accordionBasic\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 n\u1ed9i dung c\u1ee7a m\u1ee5c 2.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\"&gt;\n       &lt;button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\n               data-bs-target=\"#basicThree\" aria-expanded=\"false\" aria-controls=\"basicThree\"&gt;\n         M\u1ee5c 3\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;div id=\"basicThree\" class=\"accordion-collapse collapse\" data-bs-parent=\"#accordionBasic\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 n\u1ed9i dung c\u1ee7a m\u1ee5c 3.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-2\"><strong>B\u00e0i t\u1eadp 2<\/strong><\/h3>\n\n\n\n<p><strong>S\u1eed d\u1ee5ng accordion \u1edf b\u00e0i t\u1eadp 1 v\u1edbi icon +\/\u2013 thay cho caret m\u1eb7c \u0111\u1ecbnh, \u0111\u1ed3ng th\u1eddi \u0111\u1ed5i m\u00e0u n\u1ec1n header khi m\u1edf.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"201\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63.png\" alt=\"\" class=\"wp-image-91577\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63-300x75.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63-640x161.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63-200x50.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63-768x193.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-63-1536x386.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<p>S\u1eed d\u1ee5ng code t\u1ea1o accordion \u1edf b\u00e0i t\u1eadp 1, k\u1ebft h\u1ee3p v\u1edbi CSS t\u00f9y ch\u1ec9nh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   .accordion-button::after {\n     background-image: none;\n     content: '+';\n     font-weight: bold;\n   }\n   .accordion-button:not(.collapsed)::after {\n     background-image: none;\n     content: '\u2013';\n     font-weight: bold;\n     margin-right: 10px;\n   }\n   .accordion-button:not(.collapsed) {\n     background-color: #e3f2fd;\n     color: #0d47a1;\n   }\n &lt;\/style&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-3\"><strong>B\u00e0i t\u1eadp 3<\/strong><\/h3>\n\n\n\n<p><strong>T\u1ea1o m\u1ed9t accordion m\u00e0 nhi\u1ec1u m\u1ee5c c\u00f3 th\u1ec3 m\u1edf c\u00f9ng l\u00fac (kh\u00f4ng auto \u0111\u00f3ng khi m\u1edf m\u1ee5c kh\u00e1c). Th\u00eam JavaScript \u0111\u1ec3 c\u00f3 n\u00fat \u201cM\u1edf t\u1ea5t c\u1ea3 \/ \u0110\u00f3ng t\u1ea5t c\u1ea3\u201d.<\/strong><\/p>\n\n\n\n<p>Khi \u0111\u00f3ng:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"151\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64.png\" alt=\"\" class=\"wp-image-91578\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64-300x57.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64-640x121.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64-200x38.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64-768x145.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-64-1536x290.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Khi m\u1edf:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"237\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65.png\" alt=\"\" class=\"wp-image-91579\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65.png 800w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65-300x89.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65-640x190.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65-200x59.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65-768x228.png 768w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/image-65-1536x455.png 1536w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<p>Kh\u1edfi t\u1ea1o Accordion v\u1edbi bi\u1ebfn th\u1ec3 <strong>Accordion Always Open, <\/strong>v\u00e0 s\u1eed d\u1ee5ng javascript \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n \u0111\u00f3ng\/m\u1edf d\u1ef1a tr\u00ean s\u1ef1 ki\u1ec7n click c\u1ee7a button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"accordionAdvanced\">\n   &lt;div class=\"accordion-item\">\n     &lt;h2 class=\"accordion-header\">\n       &lt;button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\"\n               data-bs-target=\"#advOne\" aria-expanded=\"true\" aria-controls=\"advOne\">\n         M\u1ee5c A\n       &lt;\/button>\n     &lt;\/h2>\n     &lt;div id=\"advOne\" class=\"accordion-collapse collapse show\">\n       &lt;div class=\"accordion-body\">N\u1ed9i dung A.&lt;\/div>\n     &lt;\/div>\n   &lt;\/div>\n   &lt;div class=\"accordion-item\">\n     &lt;h2 class=\"accordion-header\">\n       &lt;button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\n               data-bs-target=\"#advTwo\" aria-expanded=\"false\" aria-controls=\"advTwo\">\n         M\u1ee5c B\n       &lt;\/button>\n     &lt;\/h2>\n     &lt;div id=\"advTwo\" class=\"accordion-collapse collapse\">\n       &lt;div class=\"accordion-body\">N\u1ed9i dung B.&lt;\/div>\n     &lt;\/div>\n   &lt;\/div>\n &lt;\/div>\n  &lt;button id=\"toggleAll\" class=\"btn btn-primary mt-3\">M\u1edf t\u1ea5t c\u1ea3&lt;\/button>\n  &lt;script>\n   const toggleBtn = document.getElementById('toggleAll');\n   const allCollapse = document.querySelectorAll('#accordionAdvanced .accordion-collapse');\n   let allOpen = false;\n    toggleBtn.addEventListener('click', () => {\n     allOpen = !allOpen;\n     toggleBtn.textContent = allOpen ? '\u0110\u00f3ng t\u1ea5t c\u1ea3' : 'M\u1edf t\u1ea5t c\u1ea3';\n     allCollapse.forEach(el => {\n       const collapseInstance = bootstrap.Collapse.getOrCreateInstance(el, { toggle: false });\n       allOpen ? collapseInstance.show() : collapseInstance.hide();\n     });\n   });\n &lt;\/script><\/code><\/pre>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-ph\u1ed5-bi\u1ebfn-v\u1ec1-accordion-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_pho_bien_ve_Accordion_bootstrap\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi ph\u1ed5 bi\u1ebfn v\u1ec1 Accordion bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-co-th\u1ec3-m\u1edf-s\u1eb5n-m\u1ed9t-m\u1ee5c-khi-load-trang-khong\"><strong>Accordion c\u00f3 th\u1ec3 m\u1edf s\u1eb5n m\u1ed9t m\u1ee5c khi load trang kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>C\u00f3. B\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam class<strong> .show <\/strong>v\u00e0o ph\u1ea7n <strong>.accordion-collapse <\/strong>c\u1ee7a m\u1ee5c mu\u1ed1n m\u1edf m\u1eb7c \u0111\u1ecbnh. V\u00ed d\u1ee5, trong ba m\u1ee5c accordion, n\u1ebfu b\u1ea1n th\u00eam .show cho m\u1ee5c \u0111\u1ea7u ti\u00ean th\u00ec khi t\u1ea3i trang, n\u1ed9i dung m\u1ee5c n\u00e0y s\u1ebd hi\u1ec3n th\u1ecb s\u1eb5n m\u00e0 kh\u00f4ng c\u1ea7n ng\u01b0\u1eddi d\u00f9ng click.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"accordion\" id=\"accordionExample\"&gt;\n   &lt;div class=\"accordion-item\"&gt;\n     &lt;h2 class=\"accordion-header\" id=\"headingOne\"&gt;\n       &lt;button class=\"accordion-button\" type=\"button\"\n               data-bs-toggle=\"collapse\"\n               data-bs-target=\"#collapseOne\"\n               aria-expanded=\"true\"\n               aria-controls=\"collapseOne\"&gt;\n         M\u1ee5c m\u1edf s\u1eb5n\n       &lt;\/button&gt;\n     &lt;\/h2&gt;\n     &lt;!-- Th\u00eam class .show \u0111\u1ec3 m\u1edf m\u1eb7c \u0111\u1ecbnh --&gt;\n     &lt;div id=\"collapseOne\" class=\"accordion-collapse collapse show\"\n          aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionExample\"&gt;\n       &lt;div class=\"accordion-body\"&gt;\n         \u0110\u00e2y l\u00e0 n\u1ed9i dung s\u1ebd hi\u1ec3n th\u1ecb ngay khi t\u1ea3i trang.\n       &lt;\/div&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-thay-d\u1ed5i-icon-mui-ten-m\u1eb7c-d\u1ecbnh-trong-accordion\"><strong>L\u00e0m sao thay \u0111\u1ed5i icon m\u0169i t\u00ean m\u1eb7c \u0111\u1ecbnh trong Accordion?<\/strong><\/h3>\n\n\n\n<p>Bootstrap t\u1ea1o icon m\u0169i t\u00ean b\u1eb1ng <strong>pseudo-element ::after<\/strong> trong class <strong>.accordion-button<\/strong>. N\u1ebfu mu\u1ed1n thay \u0111\u1ed5i, b\u1ea1n c\u00f3 th\u1ec3 ghi \u0111\u00e8 CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n   .accordion-button::after {\n     background-image: none;\n     content: '+';\n   }\n\n\n   .accordion-button:not(.collapsed)::after {\n     background-image: none;\n     content: '\u2013';\n   }\n &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Khi \u0111\u00f3, d\u1ea5u + s\u1ebd hi\u1ec3n th\u1ecb l\u00fac \u0111\u00f3ng, v\u00e0 d\u1ea5u \u2013 xu\u1ea5t hi\u1ec7n khi m\u1ee5c \u0111\u01b0\u1ee3c m\u1edf. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 thay b\u1eb1ng icon t\u1eeb th\u01b0 vi\u1ec7n nh\u01b0 Font Awesome.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordion-co-th\u1ec3-dung-d\u1ec3-lam-sidebar-menu-khong\"><strong>Accordion c\u00f3 th\u1ec3 d\u00f9ng \u0111\u1ec3 l\u00e0m sidebar menu kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p Accordion v\u1edbi bi\u1ebfn th\u1ec3 Accordion Flush \u0111\u1ec3 lo\u1ea1i b\u1ecf vi\u1ec1n ngo\u00e0i, gi\u00fap hi\u1ec3n th\u1ecb g\u1ecdn g\u00e0ng h\u01a1n trong sidebar. \u0110\u00e2y l\u00e0 c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 x\u00e2y d\u1ef1ng menu nhi\u1ec1u c\u1ea5p ho\u1eb7c danh s\u00e1ch b\u1ed9 l\u1ecdc (filter) trong e-commerce. Tuy nhi\u00ean, h\u00e3y \u0111\u1ea3m b\u1ea3o menu r\u00f5 r\u00e0ng, kh\u00f4ng nh\u1ed3i nh\u00e9t qu\u00e1 nhi\u1ec1u t\u1ea7ng \u0111\u1ec3 tr\u00e1nh g\u00e2y r\u1ed1i cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Accordion Bootstrap l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n g\u1ecdn g\u00e0ng nh\u01b0ng r\u1ea5t m\u1ea1nh m\u1ebd, gi\u00fap b\u1ea1n t\u1ed5 ch\u1ee9c v\u00e0 t\u1ed1i \u01b0u kh\u00f4ng gian hi\u1ec3n th\u1ecb n\u1ed9i dung. V\u1edbi h\u1ec7 th\u1ed1ng class v\u00e0 plugin Collapse t\u00edch h\u1ee3p s\u1eb5n, b\u1ea1n c\u00f3 th\u1ec3 nhanh ch\u00f3ng x\u00e2y d\u1ef1ng accordion t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao m\u00e0 kh\u00f4ng c\u1ea7n vi\u1ebft nhi\u1ec1u JavaScript.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft n\u00e0y, ITviec hi v\u1ecdng \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n \u0111\u1ecdc nh\u1eefng ki\u1ebfn th\u1ee9c h\u1eefu \u00edch \u0111\u1ec3 hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng Accordion trong Bootstrap v\u00e0 t\u1ef1 tin \u00e1p d\u1ee5ng v\u00e0o c\u00e1c d\u1ef1 \u00e1n th\u1ef1c t\u1ebf c\u1ee7a m\u00ecnh.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c qu\u1ea3n l\u00fd nhi\u1ec1u kh\u1ed1i n\u1ed9i dung d\u00e0i \u0111\u00f4i khi khi\u1ebfn trang tr\u1edf n\u00ean r\u1ed1i m\u1eaft. Accordion l\u00e0 gi\u1ea3i ph\u00e1p g\u1ecdn g\u00e0ng gi\u00fap gom n\u1ed9i dung v\u00e0o t\u1eebng m\u1ee5c, ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 m\u1edf ph\u1ea7n h\u1ecd quan t\u00e2m. Nh\u1edd h\u1ec7 th\u1ed1ng class v\u00e0 plugin Collapse c\u00f3 s\u1eb5n, Bootstrap gi\u00fap b\u1ea1n [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":93371,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[10352,109],"tags":[],"class_list":["post-91564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap-chuyen-mon-it","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Accordion Bootstrap \u0111\u1ec3 t\u1ea1o n\u1ed9i dung thu g\u1ecdn, m\u1edf r\u1ed9ng m\u01b0\u1ee3t m\u00e0. B\u00e0i vi\u1ebft c\u00f2n k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 luy\u1ec7n t\u1eadp.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan\" \/>\n<meta property=\"og:description\" content=\"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c qu\u1ea3n l\u00fd nhi\u1ec1u kh\u1ed1i n\u1ed9i dung d\u00e0i \u0111\u00f4i khi khi\u1ebfn trang tr\u1edf n\u00ean r\u1ed1i m\u1eaft. Accordion l\u00e0 gi\u1ea3i ph\u00e1p g\u1ecdn g\u00e0ng gi\u00fap gom n\u1ed9i dung\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-30T15:27:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T02:39:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/Accordion-Bootstrap-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"421\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan - ITviec Blog","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Accordion Bootstrap \u0111\u1ec3 t\u1ea1o n\u1ed9i dung thu g\u1ecdn, m\u1edf r\u1ed9ng m\u01b0\u1ee3t m\u00e0. B\u00e0i vi\u1ebft c\u00f2n k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 luy\u1ec7n t\u1eadp.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/","og_locale":"vi_VN","og_type":"article","og_title":"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan","og_description":"Trong giao di\u1ec7n web hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c qu\u1ea3n l\u00fd nhi\u1ec1u kh\u1ed1i n\u1ed9i dung d\u00e0i \u0111\u00f4i khi khi\u1ebfn trang tr\u1edf n\u00ean r\u1ed1i m\u1eaft. Accordion l\u00e0 gi\u1ea3i ph\u00e1p g\u1ecdn g\u00e0ng gi\u00fap gom n\u1ed9i dung","og_url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-11-30T15:27:07+00:00","article_modified_time":"2025-12-02T02:39:47+00:00","og_image":[{"width":800,"height":421,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/Accordion-Bootstrap-scaled.png","type":"image\/png"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"19 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan","datePublished":"2025-11-30T15:27:07+00:00","dateModified":"2025-12-02T02:39:47+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/"},"wordCount":4085,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/Accordion-Bootstrap-scaled.png","articleSection":["Bootstrap","Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/","url":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/","name":"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/Accordion-Bootstrap-scaled.png","datePublished":"2025-11-30T15:27:07+00:00","dateModified":"2025-12-02T02:39:47+00:00","description":"T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Accordion Bootstrap \u0111\u1ec3 t\u1ea1o n\u1ed9i dung thu g\u1ecdn, m\u1edf r\u1ed9ng m\u01b0\u1ee3t m\u00e0. B\u00e0i vi\u1ebft c\u00f2n k\u00e8m v\u00ed d\u1ee5 th\u1ef1c t\u1ebf \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 luy\u1ec7n t\u1eadp.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/Accordion-Bootstrap-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/09\/Accordion-Bootstrap-scaled.png","width":800,"height":421,"caption":"Accordion Bootstrap - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-su-dung-accordion-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Accordion Bootstrap: H\u01b0\u1edbng d\u1eabn to\u00e0n t\u1eadp k\u00e8m v\u00ed d\u1ee5 tr\u1ef1c quan"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=91564"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91564\/revisions"}],"predecessor-version":[{"id":93414,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/91564\/revisions\/93414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/93371"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=91564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=91564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=91564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}