{"id":2746,"date":"2019-12-27T19:41:51","date_gmt":"2019-12-27T19:41:51","guid":{"rendered":"https:\/\/wordpress-theme.spider-themes.net\/docly\/docs\/rogan-wordpress-theme-documentation\/blocks\/tab\/"},"modified":"2019-12-27T19:41:51","modified_gmt":"2019-12-27T19:41:51","slug":"tab","status":"publish","type":"docs","link":"https:\/\/dayizhou.com\/index.php\/docs\/docly-documentation\/elements\/tab\/","title":{"rendered":"Tabs Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2746\" class=\"elementor elementor-2746\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e634420 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e634420\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ba18a27\" data-id=\"ba18a27\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b17a77f elementor-widget elementor-widget-heading\" data-id=\"b17a77f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Normal Tab<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c14358b elementor-widget elementor-widget-text-editor\" data-id=\"c14358b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Nostra scelerisque fuga wisi aenean.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d387692 elementor-widget elementor-widget-docly_tabs\" data-id=\"d387692\" data-element_type=\"widget\" data-widget_type=\"docly_tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"tab_shortcode\">\n            <ul class=\"nav nav-tabs\" role=\"tablist\">\n                                    <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.2s\">\n                        <a href=\"#docly-tab-content-2211\" class=\"nav-link active\" id=\"docly-tab-2211\" role=\"tab\" aria-controls=\"docly-tab-content-2211\" data-bs-toggle=\"tab\" aria-selected=\"true\">\n                            Elements                        <\/a>\n                    <\/li>\n                                        <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.4s\">\n                        <a href=\"#docly-tab-content-2212\" class=\"nav-link \" id=\"docly-tab-2212\" role=\"tab\" aria-controls=\"docly-tab-content-2212\" data-bs-toggle=\"tab\" aria-selected=\"false\">\n                            Customer                        <\/a>\n                    <\/li>\n                                        <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.6s\">\n                        <a href=\"#docly-tab-content-2213\" class=\"nav-link \" id=\"docly-tab-2213\" role=\"tab\" aria-controls=\"docly-tab-content-2213\" data-bs-toggle=\"tab\" aria-selected=\"false\">\n                            Reporting                        <\/a>\n                    <\/li>\n                                <\/ul>\n            <div class=\"tab-content\">\n                                    <div class=\"tab-pane fade show active\" id=\"docly-tab-content-2211\" aria-labelledby=\"docly-tab-2211\" role=\"tabpanel\">\n                        <div class=\"tab_img\">\n                            <p>Don&#8217;t get shirty with me what a plonker on your bike mate bugger all mate chip shop bits and bobs smashing mush bugger cup of char, in my flat.<\/p>                        <\/div>\n                    <\/div>\n                                        <div class=\"tab-pane fade \" id=\"docly-tab-content-2212\" aria-labelledby=\"docly-tab-2212\" role=\"tabpanel\">\n                        <div class=\"tab_img\">\n                            <p>Twit brilliant he legged it he nicked it amongst hotpot chinwag spend a penny lemon squeezy he lost his bottle porkies, Why it&#8217;s your round happy days.<\/p>                        <\/div>\n                    <\/div>\n                                        <div class=\"tab-pane fade \" id=\"docly-tab-content-2213\" aria-labelledby=\"docly-tab-2213\" role=\"tabpanel\">\n                        <div class=\"tab_img\">\n                            Tab Content                        <\/div>\n                    <\/div>\n                                <\/div>\n        <\/div>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1225d0d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1225d0d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-83e5329\" data-id=\"83e5329\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fcc8f59 elementor-widget elementor-widget-heading\" data-id=\"fcc8f59\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Process Tab<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8431c2e elementor-widget elementor-widget-heading\" data-id=\"8431c2e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Try the Docly API in seconds. Create your first customer, charge, and more by following the step below.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-224d956 elementor-widget elementor-widget-docly_process_tabs\" data-id=\"224d956\" data-element_type=\"widget\" data-widget_type=\"docly_process_tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"process_tab_shortcode\">\n            <ul class=\"nav nav-tabs v_menu ps-0\" role=\"tablist\">\n                                    <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.2s\">\n                        <a class=\"nav-link active\" id=\"docly-tab-3591\" data-bs-toggle=\"tab\" role=\"tab\" href=\"#docly-tab-content-3591\" aria-controls=\"docly-tab-content-3591\">\n                            <span>1<\/span>Card                        <\/a>\n                    <\/li>\n                                        <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.4s\">\n                        <a class=\"nav-link \" id=\"docly-tab-3592\" data-bs-toggle=\"tab\" role=\"tab\" href=\"#docly-tab-content-3592\" aria-controls=\"docly-tab-content-3592\">\n                            <span>2<\/span>Customer                        <\/a>\n                    <\/li>\n                                        <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.6s\">\n                        <a class=\"nav-link \" id=\"docly-tab-3593\" data-bs-toggle=\"tab\" role=\"tab\" href=\"#docly-tab-content-3593\" aria-controls=\"docly-tab-content-3593\">\n                            <span>3<\/span>Charge                        <\/a>\n                    <\/li>\n                                        <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"0.8s\">\n                        <a class=\"nav-link \" id=\"docly-tab-3594\" data-bs-toggle=\"tab\" role=\"tab\" href=\"#docly-tab-content-3594\" aria-controls=\"docly-tab-content-3594\">\n                            <span>4<\/span>Subscription                        <\/a>\n                    <\/li>\n                                        <li class=\"nav-item wow fadeInUp\" data-wow-delay=\"1s\">\n                        <a class=\"nav-link \" id=\"docly-tab-3595\" data-bs-toggle=\"tab\" role=\"tab\" href=\"#docly-tab-content-3595\" aria-controls=\"docly-tab-content-3595\">\n                            <span>5<\/span>Success!                        <\/a>\n                    <\/li>\n                                <\/ul>\n            <div class=\"tab-content\">\n                                    <div class=\"tab-pane fade show active\" aria-labelledby=\"docly-tab-3591\" role=\"tabpanel\" id=\"docly-tab-content-3591\">\n                        <p>Twit brilliant he legged it he nicked it amongst hotpot chinwag spend a penny lemon squeezy he lost his bottle porkies, Why it's your round happy days.<\/p>\n                                                    <div class=\"version\">\n                                <div class=\"v_head\">Docly run hello-world<\/div>\n<div class=\"v_middle\">\n<p>Unable to find image\u00a0<span class=\"red\">'hello-world:latest'<\/span>\u00a0locally<\/p>\n<p>latest: Pulling from library\/hello-world<\/p>\n<p>ca4f61b1923c: Pull\u00a0<span class=\"green\">complete<\/span><\/p>\n<p>Digest: sha256:ca0eeb6fb05351dfc8759c20733c91def84cb8007aa89a5bf606bc8b315b9fc7<\/p>\n<p>Status: Downloaded newer image for hello-world:latest<\/p>\n<\/div>\n<div class=\"v_footer\">\n<p>Hello from Docly!<br \/>This message shows that your installation appears to be working correctly.<\/p>\n<\/div>\n                            <\/div>\n                                            <\/div>\n                                        <div class=\"tab-pane fade \" aria-labelledby=\"docly-tab-3592\" role=\"tabpanel\" id=\"docly-tab-content-3592\">\n                        <p>Tellus dicta natoque fugiat cum! Quis quae, veniam! Eiusmod dis tincidunt dignissim, nascetur consequat! Ut! Impedit<\/p>\n                                                    <div class=\"version\">\n                                <div class=\"v_head\">\n<p>Vivamus vero netus tristique venenatis excepteur nisl diamlorem nobis dolorem consequatur repellendus voluptatibus sit voluptas similique taciti pariatur, veniam, consequatur.<\/p>\n<p>Maecenas tempore facilis temporibus quas! Eius illo optio, rhoncus expedita doloremque gravida, aptent, pariatur porro<\/p>\n<p>Tristique omnis? Hymenaeos montes facilisi magnam facilisi ante voluptates odio nulla exercitationem tincidunt maecenas, dolores mauris praesent placeat<\/p>\n<p>Hello from Docly!<br \/>This message shows that your installation appears to be working correctly.<\/p>\n<\/div>\n                            <\/div>\n                                            <\/div>\n                                        <div class=\"tab-pane fade \" aria-labelledby=\"docly-tab-3593\" role=\"tabpanel\" id=\"docly-tab-content-3593\">\n                        <p>Etiam consectetur reprehenderit ac repudiandae. Quis proident dictumst illum? Aute, itaque! Lobortis suspendisse, iusto excepturi? Posuere nascetur sunt?<\/p>\n                                                    <div class=\"version\">\n                                <div class=\"v_head\">Docly run hello-world<\/div>\n<div class=\"v_middle\">\n<p>Unable to find image\u00a0<span class=\"red\">'hello-world:latest'<\/span>\u00a0locally<\/p>\n<p>latest: Pulling from library\/hello-world<\/p>\n<p>ca4f61b1923c: Pull\u00a0<span class=\"green\">complete<\/span><\/p>\n<p>Digest: sha256:ca0eeb6fb05351dfc8759c20733c91def84cb8007aa89a5bf606bc8b315b9fc7<\/p>\n<p>Status: Downloaded newer image for hello-world:latest<\/p>\n<\/div>\n<div class=\"v_footer\">\n<p>Hello from Docly!<br \/>This message shows that your installation appears to be working correctly.<\/p>\n<\/div>\n                            <\/div>\n                                            <\/div>\n                                        <div class=\"tab-pane fade \" aria-labelledby=\"docly-tab-3594\" role=\"tabpanel\" id=\"docly-tab-content-3594\">\n                        <p>Mi pulvinar debitis magni commodo cupiditate alias enim ut! Amet, veritatis adipiscing dis rerum, curabitur pellentesque harum cubilia.<\/p>\n                                                    <div class=\"version\">\n                                <div class=\"v_head\">Docly run hello-world<\/div>\n<div class=\"v_middle\">\n<p>Unable to find image\u00a0<span class=\"red\">'hello-world:latest'<\/span>\u00a0locally<\/p>\n<p>latest: Pulling from library\/hello-world<\/p>\n<p>ca4f61b1923c: Pull\u00a0<span class=\"green\">complete<\/span><\/p>\n<p>Digest: sha256:ca0eeb6fb05351dfc8759c20733c91def84cb8007aa89a5bf606bc8b315b9fc7<\/p>\n<p>Status: Downloaded newer image for hello-world:latest<\/p>\n<\/div>\n<div class=\"v_footer\">\n<p>Hello from Docly!<br \/>This message shows that your installation appears to be working correctly.<\/p>\n<\/div>\n                            <\/div>\n                                            <\/div>\n                                        <div class=\"tab-pane fade \" aria-labelledby=\"docly-tab-3595\" role=\"tabpanel\" id=\"docly-tab-content-3595\">\n                        <p>Blandit illum commodo error lorem, aliquet? Ullamcorper eum diamlorem. Facilisis, anim torquent quia exercitation, repellat? Facilis, cillum tempore<\/p>\n                                                    <div class=\"version\">\n                                <div class=\"v_head\">Docly run hello-world<\/div>\n<div class=\"v_middle\">\n<p>Unable to find image\u00a0<span class=\"red\">'hello-world:latest'<\/span>\u00a0locally<\/p>\n<p>latest: Pulling from library\/hello-world<\/p>\n<p>ca4f61b1923c: Pull\u00a0<span class=\"green\">complete<\/span><\/p>\n<p>Digest: sha256:ca0eeb6fb05351dfc8759c20733c91def84cb8007aa89a5bf606bc8b315b9fc7<\/p>\n<p>Status: Downloaded newer image for hello-world:latest<\/p>\n<\/div>\n<div class=\"v_footer\">\n<p>Hello from Docly!<br \/>This message shows that your installation appears to be working correctly.<\/p>\n<\/div>\n                            <\/div>\n                                            <\/div>\n                                    <button class=\"btn btn-info btn-lg previous\"><i class=\"arrow_carrot-left\"><\/i><\/button>\n                <button class=\"btn btn-info btn-lg next\"><i class=\"arrow_carrot-right\"><\/i><\/button>\n            <\/div>\n        <\/div>\n\n        <script>\n            jQuery(document).ready(function($) {\n                \/\/ Variables\n                var tabsCount = 5; \/\/ Number of tabs\n                var currentTab = 1; \/\/ Current active tab\n\n                \/\/ Function to show the specified tab\n                function showTab(tabNumber) {\n                    \/\/ Hide all tabs and remove active class\n                    $('.tab-pane').removeClass('show active');\n\n                    \/\/ Show the specified tab and add active class\n                    $('#docly-tab-content-359' + tabNumber).addClass('show active');\n\n                    \/\/ Update the numbering\n                    $('.nav-tabs a').removeClass('active');\n                    $('.nav-tabs a[href=\"#docly-tab-content-359' + tabNumber + '\"]').addClass('active');\n                }\n\n                \/\/ \"Next\" button click event\n                $('.next').on('click', function() {\n                    currentTab = (currentTab < tabsCount) ? currentTab + 1 : 1;\n                    showTab(currentTab);\n                });\n\n                \/\/ \"Previous\" button click event\n                $('.previous').on('click', function() {\n                    currentTab = (currentTab > 1) ? currentTab - 1 : tabsCount;\n                    showTab(currentTab);\n                });\n            });\n        <\/script>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Normal Tab Lorem ipsum dolor sit amet, consectetur adip [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2744,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-2746","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/docs\/2746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/comments?post=2746"}],"version-history":[{"count":0,"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/docs\/2746\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/docs\/2744"}],"wp:attachment":[{"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/media?parent=2746"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/dayizhou.com\/index.php\/wp-json\/wp\/v2\/doc_tag?post=2746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}