{"id":1748,"date":"2024-06-23T14:23:28","date_gmt":"2024-06-23T12:23:28","guid":{"rendered":"https:\/\/wypo.io\/documentations\/gutenberg-tabs\/"},"modified":"2024-06-23T14:29:16","modified_gmt":"2024-06-23T12:29:16","slug":"gutenberg-tabs","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/gutenberg-tabs\/","title":{"rendered":"Gutenberg Tabs"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-prerequis\">Requirements<\/h2>\n\n\n\n<ul class=\"is-style-important wp-block-list\">\n<li class=\"\"><strong>WordPress<\/strong> : Version 5.9 or higher<\/li>\n\n\n\n<li class=\"\"><strong>PHP<\/strong> : Version 7.0 or higher<\/li>\n<\/ul>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n            <div class=\"is-style-smallbordertop wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<div class=\"wp-block-group   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-installation\">Installation<\/h2>\n\n\n\n<p class=\"\">To install the plugin, please refer to the &#8220;<a href=\"https:\/\/wypo.io\/en\/complete-guide-installing-wordpress-plugin\/\">Installing a plugin<\/a>&#8221; documentation.  <\/p>\n<\/div>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-example\">Example<\/h2>\n\n\n            <script>\r\n              window.addEventListener(\"DOMContentLoaded\", function () {\r\n                function setMobile() {\r\n                  if (document.getElementById(\"block-0d261f5a-7d92-4cec-855d-b39c8eeb9db8\")) {\r\n                    if (window.matchMedia(\"(max-width: 767px)\").matches) {\r\n                      document.getElementById(\"block-0d261f5a-7d92-4cec-855d-b39c8eeb9db8\").classList.add(\"is-mobile\");\r\n                    } else {\r\n                      if (document.getElementById(\"block-0d261f5a-7d92-4cec-855d-b39c8eeb9db8\").classList.contains(\"is-mobile\")) {\r\n                        document.getElementById(\"block-0d261f5a-7d92-4cec-855d-b39c8eeb9db8\").classList.remove(\"is-mobile\");\r\n                      }\r\n                    }\r\n                  }\r\n                }\r\n                setMobile();\r\n                window.addEventListener(\"scroll\", function () { setMobile(); })\r\n                window.addEventListener(\"resize\", function () { setMobile(); })\r\n              })\r\n            <\/script>\r\n                    <div class=\"wp-block-hf-tabs tabs-full-width \" classnameonopen=\"\" id=\"block-0d261f5a-7d92-4cec-855d-b39c8eeb9db8\">\r\n          <div class=\"wp-block-hf-tabs-title\">\r\n                              <button class=\"\r\n                    wp-block-hf-tabs-title-tab current\" role=\"tab\" id=\"tab-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-0\"\r\n                    aria-controls=\"panel-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-0\"\r\n                    aria-selected=\"true\">\r\n                    Tab 1                  <\/button>\r\n                                    <button class=\"\r\n                    wp-block-hf-tabs-title-tab \" role=\"tab\" id=\"tab-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-1\"\r\n                    aria-controls=\"panel-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-1\"\r\n                    aria-selected=\"false\">\r\n                    Tab 2                  <\/button>\r\n                                    <button class=\"\r\n                    wp-block-hf-tabs-title-tab \" role=\"tab\" id=\"tab-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-2\"\r\n                    aria-controls=\"panel-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-2\"\r\n                    aria-selected=\"false\">\r\n                    Tab 3                  <\/button>\r\n                            <\/div>\r\n          <div class=\"wp-block-hf-tabs-content\">\r\n                  <div class=\"wp-block-hf-tabs-content-tab current \" role=\"tabpanel\" tabindex=\"0\"\r\n        id=\"panel-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-0\"\r\n        aria-labelledby=\"tab-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-0\" >\r\n        <div class=\"wp-block-hf-tabs-content-tab-content is-layout-flow \">\r\n                      <div class=\"wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-r-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-b-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-l-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-r-md:var(--wp--preset--spacing--20);--_hfal-cg-p-r-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-b-md:var(--wp--preset--spacing--20);--_hfal-cg-p-b-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-l-md:var(--wp--preset--spacing--20);--_hfal-cg-p-l-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">Content 1.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n      <\/div>\r\n            <div class=\"wp-block-hf-tabs-content-tab \" role=\"tabpanel\" tabindex=\"1\"\r\n        id=\"panel-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-1\"\r\n        aria-labelledby=\"tab-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-1\" hidden>\r\n        <div class=\"wp-block-hf-tabs-content-tab-content is-layout-flow \">\r\n                      <div class=\"wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-r-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-b-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-l-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-r-md:var(--wp--preset--spacing--20);--_hfal-cg-p-r-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-b-md:var(--wp--preset--spacing--20);--_hfal-cg-p-b-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-l-md:var(--wp--preset--spacing--20);--_hfal-cg-p-l-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">Content 2.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n      <\/div>\r\n            <div class=\"wp-block-hf-tabs-content-tab \" role=\"tabpanel\" tabindex=\"2\"\r\n        id=\"panel-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-2\"\r\n        aria-labelledby=\"tab-0d261f5a-7d92-4cec-855d-b39c8eeb9db8-2\" hidden>\r\n        <div class=\"wp-block-hf-tabs-content-tab-content is-layout-flow \">\r\n                      <div class=\"wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-r-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-b-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-l-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-r-md:var(--wp--preset--spacing--20);--_hfal-cg-p-r-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-b-md:var(--wp--preset--spacing--20);--_hfal-cg-p-b-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-l-md:var(--wp--preset--spacing--20);--_hfal-cg-p-l-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">Content 3.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n      <\/div>\r\n                <\/div>\r\n        <\/div>\r\n        \n\n      <div style=\"--_hfal-s-h-lg:var(--wp--preset--spacing--50);\" class=\"wp-block-habefast-spacer\"><\/div>\r\n      \n\n            <script>\r\n              window.addEventListener(\"DOMContentLoaded\", function () {\r\n                function setMobile() {\r\n                  if (document.getElementById(\"block-64dd7148-fa34-4692-91e2-81be1ee74f35\")) {\r\n                    if (window.matchMedia(\"(max-width: 767px)\").matches) {\r\n                      document.getElementById(\"block-64dd7148-fa34-4692-91e2-81be1ee74f35\").classList.add(\"is-mobile\");\r\n                    } else {\r\n                      if (document.getElementById(\"block-64dd7148-fa34-4692-91e2-81be1ee74f35\").classList.contains(\"is-mobile\")) {\r\n                        document.getElementById(\"block-64dd7148-fa34-4692-91e2-81be1ee74f35\").classList.remove(\"is-mobile\");\r\n                      }\r\n                    }\r\n                  }\r\n                }\r\n                setMobile();\r\n                window.addEventListener(\"scroll\", function () { setMobile(); })\r\n                window.addEventListener(\"resize\", function () { setMobile(); })\r\n              })\r\n            <\/script>\r\n                    <div class=\"wp-block-hf-tabs tabs-full-width tabs-verticals \" classnameonopen=\"\" id=\"block-64dd7148-fa34-4692-91e2-81be1ee74f35\">\r\n          <div class=\"wp-block-hf-tabs-title\">\r\n                              <button class=\"\r\n                    wp-block-hf-tabs-title-tab current\" role=\"tab\" id=\"tab-64dd7148-fa34-4692-91e2-81be1ee74f35-0\"\r\n                    aria-controls=\"panel-64dd7148-fa34-4692-91e2-81be1ee74f35-0\"\r\n                    aria-selected=\"true\">\r\n                    Tab 1                  <\/button>\r\n                                    <button class=\"\r\n                    wp-block-hf-tabs-title-tab \" role=\"tab\" id=\"tab-64dd7148-fa34-4692-91e2-81be1ee74f35-1\"\r\n                    aria-controls=\"panel-64dd7148-fa34-4692-91e2-81be1ee74f35-1\"\r\n                    aria-selected=\"false\">\r\n                    Tab 2                  <\/button>\r\n                                    <button class=\"\r\n                    wp-block-hf-tabs-title-tab \" role=\"tab\" id=\"tab-64dd7148-fa34-4692-91e2-81be1ee74f35-2\"\r\n                    aria-controls=\"panel-64dd7148-fa34-4692-91e2-81be1ee74f35-2\"\r\n                    aria-selected=\"false\">\r\n                    Tab 3                  <\/button>\r\n                            <\/div>\r\n          <div class=\"wp-block-hf-tabs-content\">\r\n                  <div class=\"wp-block-hf-tabs-content-tab current \" role=\"tabpanel\" tabindex=\"0\"\r\n        id=\"panel-64dd7148-fa34-4692-91e2-81be1ee74f35-0\"\r\n        aria-labelledby=\"tab-64dd7148-fa34-4692-91e2-81be1ee74f35-0\" >\r\n        <div class=\"wp-block-hf-tabs-content-tab-content is-layout-flow \">\r\n                      <div class=\"wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-r-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-b-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-l-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-r-md:var(--wp--preset--spacing--20);--_hfal-cg-p-r-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-b-md:var(--wp--preset--spacing--20);--_hfal-cg-p-b-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-l-md:var(--wp--preset--spacing--20);--_hfal-cg-p-l-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">Content 1.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n      <\/div>\r\n            <div class=\"wp-block-hf-tabs-content-tab \" role=\"tabpanel\" tabindex=\"1\"\r\n        id=\"panel-64dd7148-fa34-4692-91e2-81be1ee74f35-1\"\r\n        aria-labelledby=\"tab-64dd7148-fa34-4692-91e2-81be1ee74f35-1\" hidden>\r\n        <div class=\"wp-block-hf-tabs-content-tab-content is-layout-flow \">\r\n                      <div class=\"wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-r-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-b-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-l-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-r-md:var(--wp--preset--spacing--20);--_hfal-cg-p-r-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-b-md:var(--wp--preset--spacing--20);--_hfal-cg-p-b-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-l-md:var(--wp--preset--spacing--20);--_hfal-cg-p-l-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">Content 2.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n      <\/div>\r\n            <div class=\"wp-block-hf-tabs-content-tab \" role=\"tabpanel\" tabindex=\"2\"\r\n        id=\"panel-64dd7148-fa34-4692-91e2-81be1ee74f35-2\"\r\n        aria-labelledby=\"tab-64dd7148-fa34-4692-91e2-81be1ee74f35-2\" hidden>\r\n        <div class=\"wp-block-hf-tabs-content-tab-content is-layout-flow \">\r\n                      <div class=\"wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-r-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-b-lg:var(--wp--preset--spacing--20);--_hfal-cg-p-l-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-r-md:var(--wp--preset--spacing--20);--_hfal-cg-p-r-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-b-md:var(--wp--preset--spacing--20);--_hfal-cg-p-b-sm:var(--wp--preset--spacing--20);--_hfal-cg-p-l-md:var(--wp--preset--spacing--20);--_hfal-cg-p-l-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<p class=\"\">Content 3.<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n      <\/div>\r\n                <\/div>\r\n        <\/div>\r\n        \n\n      <div style=\"--_hfal-s-h-lg:var(--wp--preset--spacing--50);\" class=\"wp-block-habefast-spacer\"><\/div>\r\n      \n\n\n<p class=\"\"><strong>The rendering in the back-office does not reflect the rendering on the site.<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-block-parameters\">Block parameters<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Full-width tab title (Boolean), if true, tab titles will take up all available space to occupy 100% of the width of the parent element<\/li>\n\n\n\n<li class=\"\">Tab vertical, to display tab titles vertically (default is horizontal)<\/li>\n\n\n\n<li class=\"\">Tab active, to open a tab by default, the first tab by default<\/li>\n\n\n\n<li class=\"\">Mobile breakpoint (integer), to define the screen size at which tab titles will go to the line<\/li>\n\n\n\n<li class=\"\">Additional class to add to tab content (hidden in &#8220;Advanced&#8221; section)<\/li>\n\n\n\n<li class=\"\">Class to be added when a tab is opened, can be used to trigger an animation for example (hidden in &#8220;Advanced&#8221; section)<\/li>\n<\/ul>\n<\/div>\n","protected":false},"featured_media":0,"parent":0,"menu_order":43,"template":"","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Gutenberg Tabs plugin documentation [separator] [sitetitle]","hf_wpseo_meta_description":"Discover the Gutenberg Tabs plugin to create horizontal or vertical tabs in the Gutenberg editor.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","documentation_description":"This plugin adds a \"Tabs\" block to create a tab system from the Gutenberg editor.\nThis block will contain several tabs with a title and the desired content.","documentation_menu_text":"","documentation_related_pageid":187,"wypo_hidden_role_wypo_users_not_logged":false,"wypo_visibility_role_wypo_users_not_logged":false,"wypo_hidden_role_administrator":false,"wypo_visibility_role_administrator":false,"wypo_hidden_role_habefast":false,"wypo_visibility_role_habefast":false,"wypo_hidden_role_customer":false,"wypo_visibility_role_customer":false,"wypo_hidden_role_habefast_manager":false,"wypo_visibility_role_habefast_manager":false,"wypo_hidden_for_role":false,"wypo_visibility_for_role":false},"class_list":["post-1748","wypo_documentations","type-wypo_documentations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations\/1748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/wypo_documentations"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=1748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}