{"id":8,"date":"2022-02-10T15:14:43","date_gmt":"2022-02-10T15:14:43","guid":{"rendered":"https:\/\/plethoraplugins.com\/?page_id=8"},"modified":"2023-03-25T10:06:09","modified_gmt":"2023-03-25T14:06:09","slug":"tabs-accordions","status":"publish","type":"page","link":"https:\/\/plethoraplugins.com\/tabs-accordions\/","title":{"rendered":"Tabs &#038; Accordions for Gutenberg"},"content":{"rendered":"\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\" style=\"text-align: center;\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-1109\" src=\"\/wp-content\/uploads\/2022\/03\/plethoratabsaccordions.svg\" alt=\"tabs + accordions\" width=\"649\" height=\"79\"><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"examples\">for Gutenberg<\/h2>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"\/tabs-accordions\/documentation\/\" target=\"_blank\" data-type=\"page\" rel=\"noreferrer noopener\">View Documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Examples<\/h2>\n\n\n\n<div id=\"floatingsidepanel\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div id=\"layoutselector\" class=\"wp-block-group box\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<ul class=\"scrollspy-container\">\n<li><a href=\"#horizontal\">Horizontal (default)<\/a><\/li>\n\n\n\n<li><a href=\"#vertical\">Vertical<\/a><\/li>\n\n\n\n<li><a href=\"#accordion\">Accordion<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group box\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div id=\"themeselector\" class=\"wp-block-group themeselector has-foreground-color has-tertiary-background-color has-text-color has-background has-link-color wp-elements-e51bd3b7cac4efe93e61a7c043a68f6d\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\" id=\"theme-selector\">Theme<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ul>\n<li><a href=\"#switchtheme-basic\">Basic (default)<\/a><\/li>\n\n\n\n<li><a href=\"#switchtheme-tabby\">Tabby<\/a><\/li>\n\n\n\n<li><a href=\"#switchtheme-minimal\">Minimal<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div id=\"customize_box\" class=\"wp-block-group box\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\" id=\"customize\"><a class=\"wp-block-button__link wp-element-button\" href=\"#customize\">Customize<\/a><\/div>\n<\/div>\n\n\n\n<div id=\"customcss\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div id=\"horizontal\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\" id=\"horizontal\">Horizontal (Default)<\/h3>\n\n\n\n<section class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>By default, horizontal tabs will collapse to an accordion layout if the tabs won&#8217;t fit given the width of its container. You can test that out here by resizing the example below using the vertical bar to the right of the example (hover over the example to see the drag handle).<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile resizable is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><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=\"\"\n\t\t\t data-pds-tabs--responsive=\"accordion\" \n\t\t\t\t\t data-pds-tabs--responsive-accordion-collapsed-initially=\"false\" 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=\"#lorem_ipsum\"\n                                class=\" active\" \n                            >\n                            <span>Lorem <em>Ipsum<\/em>!<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#maecenas_hendrerit1\"\n                                class=\"\" \n                            >\n                            <span>Maecenas hendrerit<sup>1<\/sup><\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#nullam__pellentesque\"\n                                class=\"\" \n                            >\n                            <span>Nullam <br>pellentesque<\/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<div class=\"wp-block-image\">\n<figure class=\"alignright size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1024x683.jpg\" alt=\"\" class=\"wp-image-1378\" width=\"256\" height=\"171\" srcset=\"https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1024x683.jpg 1024w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-300x200.jpg 300w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-768x512.jpg 768w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1536x1024.jpg 1536w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1320x880.jpg 1320w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-600x400.jpg 600w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1.jpg 1920w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/figure><\/div>\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus. Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.<\/p>\n\n\n\n<p>In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.<\/p>\n\n\n\n<p>Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.<\/p>\n\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/div><\/div>\n\n\n\n<div class=\"wp-block-column resize-handle has-secondary-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10px\"><\/div>\n<\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Alternatively, you can set &#8220;Horizontal Tabs: Responsive Behavior&#8221; to Wrap to just let the tabs wrap:<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile resizable is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><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=\"\"\n\t\t\t data-pds-tabs--responsive=\"wrap\" \n\t\t\t\t\t data-pds-tabs--responsive-accordion-collapsed-initially=\"false\" 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=\"#lorem_ipsum2\"\n                                class=\" active\" \n                            >\n                            <span>Lorem <em>Ipsum<\/em>!<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#maecenas_hendrerit2\"\n                                class=\"\" \n                            >\n                            <span>Maecenas hendrerit<sup>1<\/sup><\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#nullam_pellentesque2\"\n                                class=\"\" \n                            >\n                            <span>Nullam <br>pellentesque<\/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<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1024x683.jpg\" alt=\"\" class=\"wp-image-1378\" width=\"256\" height=\"171\" srcset=\"https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1024x683.jpg 1024w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-300x200.jpg 300w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-768x512.jpg 768w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1536x1024.jpg 1536w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1320x880.jpg 1320w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-600x400.jpg 600w, https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1.jpg 1920w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/figure><\/div>\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus. Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.<\/p>\n\n\n\n<p>In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.<\/p>\n\n\n\n<p>Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.<\/p>\n\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/div><\/div>\n\n\n\n<div class=\"wp-block-column resize-handle has-secondary-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10px\" id=\"anotherhandle\"><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"vertical\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\" id=\"vertical-heading\">Vertical<\/h3>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile resizable is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div >\n        <div class=\" plethoraplugins-tabs-container plethoraplugins-tabs-container--vertical plethoraplugins-theme__minimal plethoraplugins-theme__basic \" \n\t\t\tdata-pds-tabs--layout=\"vertical\"  \n\t\t\tdata-pds-tabs--theme=\"basic\"  \n\t\t\tdata-pds-tabs--mobile-breakpoint-forced=\"\"\n\t\t\t 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-sidenavjump\" style=\"flex-basis: 25%\" >\n              <ul><li>\n                        <a \n                                href=\"#v_lorem_ipsum\"\n                                class=\" active\" \n                            >\n                            <span>V: Lorem Ipsum<\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#v_maecenas_hendrerit\"\n                                class=\"\" \n                            >\n                            <span>V: Maecenas <em>hendrerit<\/em><\/span>\n                        <\/a>\n                    <\/li><li>\n                        <a \n                                href=\"#v_nullam_pellentesque\"\n                                class=\"\" \n                            >\n                            <span>V: Nullam pellentesque<\/span>\n                        <\/a>\n                    <\/li><\/ul>\n            <\/div>\n            <div class=\"plethoraplugins-tabs--content plethoraplugins-sidenavjump-content\" style=\"flex-basis: 75%\">\n                \n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/plethoraplugins.com\/wp-content\/uploads\/2023\/02\/patrick-perkins-ETRPjvb0KM0-unsplash-1-1024x683.jpg\" alt=\"\" width=\"256\" height=\"171\"\/><\/figure><\/div>\n\n\n<p>Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.<\/p>\n\n\n\n<p>In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.<\/p>\n\n<\/div>\n\n<div class=\"\"  data-pds-tabs--accordion-initially-open=\"false\" >\n\n<p>Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.<\/p>\n\n\n\n<p>Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.<\/p>\n\n<\/div>\n\n            <\/div>\n        <\/div>\n    <\/div><\/div>\n\n\n\n<div class=\"wp-block-column resize-handle has-secondary-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10px\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"accordion\" class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\" id=\"horizontal-default\">Accordion<\/h3>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile resizable is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div >\n                    <div class=\" plethoraplugins-accordion plethoraplugins-theme__minimal plethoraplugins-theme__basic \"   >\n                        <div>\n                            \n<div id=\"a1_maecenas_hendrerit\" class=\"pds-accordion__item pds-js-accordion-item pds-no-js\" data-pds-tabs--initially-open=\"false\" data-pds-tabs--click-to-close=\"true\" data-pds-tabs--auto-close=\"true\" data-pds-tabs--scroll=\"false\" data-pds-tabs--scroll-offset=\"0\"  data-pds-tabs--icon-type=\"\" data-pds-tabs--icon=\"true\"  data-pds-tabs--icon-size=\"\" >\n                    <div id=\"at-a1_maecenas_hendrerit\" class=\"pds-accordion__title pds-js-accordion-controller\" ><span class=\"pds-accordion__heading\" role=\"heading\" aria-level=\"3\">A1: Maecenas <em>hendrerit<\/em><\/span><span class=\"pds-accordion__icon\" role=\"presentation\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 12 7.4099998\" width=\".75rem\" height=\".75rem\"><path d=\"M12 1.41 10.59 0 6 4.58 1.41 0 0 1.41l6 6z\" fill=\"currentColor\"\/><\/svg><\/span><\/div>\n                    <div id=\"ac-a1_maecenas_hendrerit\" class=\"pds-accordion__content\">\n                        \n\n<p>Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.<\/p>\n\n\n\n<p>In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.<\/p>\n\n\n                    <\/div>\n                <\/div>\n\n<div id=\"a1_nullam_pellentesque\" class=\"pds-accordion__item pds-js-accordion-item pds-no-js\" data-pds-tabs--initially-open=\"false\" data-pds-tabs--click-to-close=\"true\" data-pds-tabs--auto-close=\"true\" data-pds-tabs--scroll=\"false\" data-pds-tabs--scroll-offset=\"0\"  data-pds-tabs--icon-type=\"\" data-pds-tabs--icon=\"true\"  data-pds-tabs--icon-size=\"\" >\n                    <div id=\"at-a1_nullam_pellentesque\" class=\"pds-accordion__title pds-js-accordion-controller\" ><span class=\"pds-accordion__heading\" role=\"heading\" aria-level=\"3\">A1: Nullam pellentesque<\/span><span class=\"pds-accordion__icon\" role=\"presentation\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 12 7.4099998\" width=\".75rem\" height=\".75rem\"><path d=\"M12 1.41 10.59 0 6 4.58 1.41 0 0 1.41l6 6z\" fill=\"currentColor\"\/><\/svg><\/span><\/div>\n                    <div id=\"ac-a1_nullam_pellentesque\" class=\"pds-accordion__content\">\n                        \n\n<p>Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.<\/p>\n\n\n\n<p>Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.<\/p>\n\n\n                    <\/div>\n                <\/div>\n\n<div id=\"a1_something_else_with_a_new_line_in_the_header\" class=\"pds-accordion__item pds-js-accordion-item pds-no-js\" data-pds-tabs--initially-open=\"false\" data-pds-tabs--click-to-close=\"true\" data-pds-tabs--auto-close=\"true\" data-pds-tabs--scroll=\"false\" data-pds-tabs--scroll-offset=\"0\"  data-pds-tabs--icon-type=\"\" data-pds-tabs--icon=\"true\"  data-pds-tabs--icon-size=\"\" >\n                    <div id=\"at-a1_something_else_with_a_new_line_in_the_header\" class=\"pds-accordion__title pds-js-accordion-controller\" ><span class=\"pds-accordion__heading\" role=\"heading\" aria-level=\"3\">A1: Something Else<br>With a new line in the header<\/span><span class=\"pds-accordion__icon\" role=\"presentation\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 12 7.4099998\" width=\".75rem\" height=\".75rem\"><path d=\"M12 1.41 10.59 0 6 4.58 1.41 0 0 1.41l6 6z\" fill=\"currentColor\"\/><\/svg><\/span><\/div>\n                    <div id=\"ac-a1_something_else_with_a_new_line_in_the_header\" class=\"pds-accordion__content\">\n                        \n\n<p>Something in English, for a change<\/p>\n\n\n                    <\/div>\n                <\/div>\n\n                        <\/div>\n                    <\/div>\n            <\/div><\/div>\n\n\n\n<div class=\"wp-block-column resize-handle has-secondary-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10px\"><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>for Gutenberg View Documentation Examples Layout Horizontal (Default) By default, horizontal tabs will collapse to an accordion layout if the tabs won&#8217;t fit given the width of its container. You can test that out here by resizing the example below using the vertical bar to the right of the example (hover over the example to [&hellip;]<\/p>\n","protected":false},"author":1,"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\/8"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":227,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":1490,"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/pages\/8\/revisions\/1490"}],"wp:attachment":[{"href":"https:\/\/plethoraplugins.com\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}