{"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:\/\/sangamap.store\/?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 adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Nostra scelerisque fuga wisi aenean. Elements Customer Reporting Don\u2019t 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 [&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:\/\/sangamap.store\/index.php?rest_route=\/wp\/v2\/docs\/2746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sangamap.store\/index.php?rest_route=\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/sangamap.store\/index.php?rest_route=\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/sangamap.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sangamap.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2746"}],"version-history":[{"count":0,"href":"https:\/\/sangamap.store\/index.php?rest_route=\/wp\/v2\/docs\/2746\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sangamap.store\/index.php?rest_route=\/wp\/v2\/docs\/2744"}],"wp:attachment":[{"href":"https:\/\/sangamap.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2746"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/sangamap.store\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_tag&post=2746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}