{"id":1645,"date":"2023-03-29T08:57:24","date_gmt":"2023-03-29T12:57:24","guid":{"rendered":"https:\/\/plethoraplugins.com\/?page_id=1645"},"modified":"2023-03-29T11:35:15","modified_gmt":"2023-03-29T15:35:15","slug":"horizontal-tab-responsive-accordion-with-all-collapsed-initially","status":"publish","type":"page","link":"https:\/\/plethoraplugins.com\/horizontal-tab-responsive-accordion-with-all-collapsed-initially\/","title":{"rendered":"Horizontal tab &#8211; responsive accordion with all collapsed initially"},"content":{"rendered":"\n<p><strong>To view the responsive accordions on this page, resize your browser to &lt; 1000px<\/strong><\/p>\n\n\n\n<section class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Example 1<\/h2>\n\n\n\n<p>The following <strong>Tabs or Accordion<\/strong> block has a <strong>Horizontal <\/strong>layout with <strong>RESPONSIVE BEHAVIOR<\/strong> set to <strong>Collapse to accordion<\/strong>, and <strong>RESPONSIVE ACCORDIONS: ALL COLLAPSED INITIALLY<\/strong> set to true. The <strong>MOBILE BREAKPOINT<\/strong> has been set to <strong>1000<\/strong>px to make it easier to test this just by resizing the browser a bit.<\/p>\n\n\n<div >\n        <div class=\" plethoraplugins-tabs-container plethoraplugins-tabs-container--horizontal plethoraplugins-theme__minimal plethoraplugins-theme__basic \" \n\t\t\tdata-pds-tabs--layout=\"horizontal\"  \n\t\t\tdata-pds-tabs--theme=\"basic\"  \n\t\t\tdata-pds-tabs--mobile-breakpoint-forced=\"1000\"\n\t\t\t data-pds-tabs--responsive=\"accordion\" \n\t\t\t\t\t data-pds-tabs--responsive-accordion-collapsed-initially=\"true\" data-pds-tabs--accordion-icon-type=\"\" data-pds-tabs--accordion-icon=\"true\"  data-pds-tabs--accordion-icon-size=\"\"  data-pds-tabs--accordion-heading-level=\"h3\" data-pds-tabs--accordion-auto-close=\"true\" >\n            <div class=\"plethoraplugins-tabs\"  >\n              <ul><li>\n                        <a \n                                href=\"#ex_1_number_1\"\n                                class=\" active\" \n                            >\n                            <span>Ex 1, Number 1<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#ex_1_number_2\"\n                                class=\"\" \n                            >\n                            <span>Ex 1, Number 2<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#ex_1_number_3\"\n                                class=\"\" \n                            >\n                            <span>Ex 1, Number 3<\/span>\n                        <\/a>\n                    <\/li><\/ul>\n            <\/div>\n            <div class=\"plethoraplugins-tabs--content\" >\n                \n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p><strong>FIRST <\/strong>bit of content<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p><strong>SECOND <\/strong>bit of content<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p><strong>THIRD <\/strong>bit of content<\/p>\n\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/div><\/div><\/section>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<section class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Example 2<\/h2>\n\n\n\n<p>If you want to force the accordion to have one (or more!) specific accordion items open by default, click on the Tab block(s) you want shown by default for the mobile accordion display, and check the <strong>Accordion Item: Open Initially (Pro)<\/strong> box.  For the following example, which has the same settings as example 1 for the <strong>Tabs or Accordion block<\/strong> (with all collapsed initially set to true), the <em>second <\/em>tab is shown by default for the responsive accordion display:<\/p>\n\n\n<div >\n        <div class=\" plethoraplugins-tabs-container plethoraplugins-tabs-container--horizontal plethoraplugins-theme__minimal plethoraplugins-theme__basic \" \n\t\t\tdata-pds-tabs--layout=\"horizontal\"  \n\t\t\tdata-pds-tabs--theme=\"basic\"  \n\t\t\tdata-pds-tabs--mobile-breakpoint-forced=\"1000\"\n\t\t\t data-pds-tabs--responsive=\"accordion\" \n\t\t\t\t\t data-pds-tabs--responsive-accordion-collapsed-initially=\"true\" data-pds-tabs--accordion-icon-type=\"\" data-pds-tabs--accordion-icon=\"true\"  data-pds-tabs--accordion-icon-size=\"\"  data-pds-tabs--accordion-heading-level=\"h3\" data-pds-tabs--accordion-auto-close=\"true\" >\n            <div class=\"plethoraplugins-tabs\"  >\n              <ul><li>\n                        <a \n                                href=\"#ex_2_number_1\"\n                                class=\" active\" \n                            >\n                            <span>Ex 2, Number 1<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#ex_2_number_2\"\n                                class=\"\" \n                            >\n                            <span>Ex 2, Number 2<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#ex_2_number_3\"\n                                class=\"\" \n                            >\n                            <span>Ex 2, Number 3<\/span>\n                        <\/a>\n                    <\/li><\/ul>\n            <\/div>\n            <div class=\"plethoraplugins-tabs--content\" >\n                \n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p><strong>FIRST <\/strong>bit of content<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"true\" >\n\n<p><strong>SECOND <\/strong>bit of content<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p><strong>THIRD <\/strong>bit of content<\/p>\n\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/div><\/div><\/section>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<section class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Example 3<\/h2>\n\n\n\n<p>You can even have all accordion items expanded by default.  For the following example, <strong>Auto Close Accordion Items (Pro)<\/strong> has been set to false, and each Tab block has <strong>Accordion Item: Open Initially (Pro)<\/strong> checked.<\/p>\n\n\n<div >\n        <div class=\" plethoraplugins-tabs-container plethoraplugins-tabs-container--horizontal plethoraplugins-theme__minimal plethoraplugins-theme__basic \" \n\t\t\tdata-pds-tabs--layout=\"horizontal\"  \n\t\t\tdata-pds-tabs--theme=\"basic\"  \n\t\t\tdata-pds-tabs--mobile-breakpoint-forced=\"1000\"\n\t\t\t data-pds-tabs--responsive=\"accordion\" \n\t\t\t\t\t data-pds-tabs--responsive-accordion-collapsed-initially=\"true\" data-pds-tabs--accordion-icon-type=\"\" data-pds-tabs--accordion-icon=\"true\"  data-pds-tabs--accordion-icon-size=\"\"  data-pds-tabs--accordion-heading-level=\"h3\" data-pds-tabs--accordion-auto-close=\"false\" >\n            <div class=\"plethoraplugins-tabs\"  >\n              <ul><li>\n                        <a \n                                href=\"#ex_3_number_1\"\n                                class=\" active\" \n                            >\n                            <span>Ex 3, Number 1<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#ex_3_number_2\"\n                                class=\"\" \n                            >\n                            <span>Ex 3, Number 2<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#ex_3_number_3\"\n                                class=\"\" \n                            >\n                            <span>Ex 3, Number 3<\/span>\n                        <\/a>\n                    <\/li><\/ul>\n            <\/div>\n            <div class=\"plethoraplugins-tabs--content\" >\n                \n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"true\" >\n\n<p><strong>FIRST <\/strong>bit of content<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"true\" >\n\n<p><strong>SECOND <\/strong>bit of content<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"true\" >\n\n<p><strong>THIRD <\/strong>bit of content<\/p>\n\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"<p>To view the responsive accordions on this page, resize your browser to &lt; 1000px Example 1 The following Tabs or Accordion block has a Horizontal layout with RESPONSIVE BEHAVIOR set to Collapse to accordion, and RESPONSIVE ACCORDIONS: ALL COLLAPSED INITIALLY set to true. The MOBILE BREAKPOINT has been set to 1000px to make it easier [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/pages\/1645"}],"collection":[{"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/comments?post=1645"}],"version-history":[{"count":14,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/pages\/1645\/revisions"}],"predecessor-version":[{"id":1683,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/pages\/1645\/revisions\/1683"}],"wp:attachment":[{"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/media?parent=1645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}