{"id":394,"date":"2015-03-25T23:44:41","date_gmt":"2015-03-25T23:44:41","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=394"},"modified":"2015-03-25T23:44:41","modified_gmt":"2015-03-25T23:44:41","slug":"vertical-tabs","status":"publish","type":"page","link":"https:\/\/test.innovative8.uk.com\/wp3\/vertical-tabs\/","title":{"rendered":"Vertical Tabs"},"content":{"rendered":"<div class=\"row\">\n<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">Vertical Tabs: Left Menu<\/h2>\n<div class=\"vertical-tabs-left\">\n<div class=\"vertical-tab-list\">\n<ul class=\"nav\">\n<li class=\"active\"><a href=\"#home2\" data-toggle=\"tab\"><i class=\"fa fa-home\"><\/i> Home<\/a><\/li>\n<li><a href=\"#profile2\" data-toggle=\"tab\"><i class=\"fa fa-user\"><\/i> Profile<\/a><\/li>\n<li><a href=\"#messages2\" data-toggle=\"tab\"><i class=\"fa fa-envelope-o\"><\/i> Messages<\/a><\/li>\n<li><a href=\"#settings2\" data-toggle=\"tab\"><i class=\"fa fa-gear\"><\/i> Settings<\/a><\/li>\n<\/ul><\/div>\n<p> <!-- vertical-tab-list --><\/p>\n<div class=\"tab-content\">\n<div class=\"tab-pane active\" id=\"home2\">\n<h3 class=\"no-margin-top\">Home Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis!<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"profile2\">\n<h3 class=\"no-margin-top\">Profile Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"messages2\">\n<h3 class=\"no-margin-top\">Messages Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"settings2\">\n<h3 class=\"no-margin-top\">Settings Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at!<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- tab-content -->\n                    <\/div>\n<p> <!-- vertical-tabs-left --><\/p>\n<hr class=\"dotted\">\n<p>                    <!-- Panel Code --><\/p>\n<div class=\"panel panel-default\">\n<div class=\"panel-heading panel-heading-link\">\n                            <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\" class=\"collapsed\"><i class=\"fa fa-terminal\"><\/i> Show Code<\/a>\n                        <\/div>\n<div id=\"collapse1\" class=\"panel-collapse collapse\">\n<div class=\"panel-body panel-body-no-padding\">\n                                [xml]<br \/>\n&lt;div class=&quot;vertical-tabs-left&quot;&gt;<br \/>\n    &lt;div class=&quot;vertical-tab-list&quot;&gt;<br \/>\n        &lt;ul class=&quot;nav&quot;&gt;<br \/>\n            &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#home2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;\/i&gt; Home&lt;\/a&gt;&lt;\/li&gt;<br \/>\n            &lt;li&gt;&lt;a href=&quot;#profile2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;\/i&gt; Profile&lt;\/a&gt;&lt;\/li&gt;<br \/>\n            &lt;li&gt;&lt;a href=&quot;#messages2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;\/i&gt; Messages&lt;\/a&gt;&lt;\/li&gt;<br \/>\n            &lt;li&gt;&lt;a href=&quot;#settings2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-gear&quot;&gt;&lt;\/i&gt; Settings&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;\/ul&gt;<br \/>\n    &lt;\/div&gt; &lt;!&#8211; vertical-tab-list &#8211;&gt;<br \/>\n    &lt;div class=&quot;tab-content&quot;&gt;<br \/>\n        &lt;div class=&quot;tab-pane active&quot; id=&quot;home2&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n        &lt;div class=&quot;tab-pane&quot; id=&quot;profile2&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n        &lt;div class=&quot;tab-pane&quot; id=&quot;messages2&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n        &lt;div class=&quot;tab-pane&quot; id=&quot;settings2&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n    &lt;\/div&gt; &lt;!&#8211; tab-content &#8211;&gt;<br \/>\n&lt;\/div&gt; &lt;!&#8211; vertical-tabs-left &#8211;&gt;<br \/>\n                                [\/xml]\n                            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- panel show code --><\/p>\n<\/section>\n<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">Vertical Tabs: Right Menu<\/h2>\n<div class=\"vertical-tabs-right\">\n<div class=\"tab-content\">\n<div class=\"tab-pane active\" id=\"home3\">\n<h3 class=\"no-margin-top\">Home Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis!<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"profile3\">\n<h3 class=\"no-margin-top\">Profile Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"messages3\">\n<h3 class=\"no-margin-top\">Messages Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"settings3\">\n<h3 class=\"no-margin-top\">Settings Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at!<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- tab-content --><\/p>\n<div class=\"vertical-tab-list\">\n<ul class=\"nav\">\n<li class=\"active\"><a href=\"#home3\" data-toggle=\"tab\"><i class=\"fa fa-home\"><\/i> Home<\/a><\/li>\n<li><a href=\"#profile3\" data-toggle=\"tab\"><i class=\"fa fa-user\"><\/i> Profile<\/a><\/li>\n<li><a href=\"#messages3\" data-toggle=\"tab\"><i class=\"fa fa-envelope-o\"><\/i> Messages<\/a><\/li>\n<li><a href=\"#settings3\" data-toggle=\"tab\"><i class=\"fa fa-gear\"><\/i> Settings<\/a><\/li>\n<\/ul><\/div>\n<p> <!-- vertical-tab-list -->\n                    <\/div>\n<p> <!-- vertical-tabs-left --><\/p>\n<hr class=\"dotted\">\n<p>                    <!-- Panel Code --><\/p>\n<div class=\"panel panel-default\">\n<div class=\"panel-heading panel-heading-link\">\n                            <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse2\" class=\"collapsed\"><i class=\"fa fa-terminal\"><\/i> Show Code<\/a>\n                        <\/div>\n<div id=\"collapse2\" class=\"panel-collapse collapse\">\n<div class=\"panel-body panel-body-no-padding\">\n                                [xml]<br \/>\n&lt;div class=&quot;vertical-tabs-right&quot;&gt;<br \/>\n    &lt;div class=&quot;vertical-tab-list&quot;&gt;<br \/>\n        &lt;ul class=&quot;nav&quot;&gt;<br \/>\n            &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#home3&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;\/i&gt; Home&lt;\/a&gt;&lt;\/li&gt;<br \/>\n            &lt;li&gt;&lt;a href=&quot;#profile3&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;\/i&gt; Profile&lt;\/a&gt;&lt;\/li&gt;<br \/>\n            &lt;li&gt;&lt;a href=&quot;#messages3&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;\/i&gt; Messages&lt;\/a&gt;&lt;\/li&gt;<br \/>\n            &lt;li&gt;&lt;a href=&quot;#settings3&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-gear&quot;&gt;&lt;\/i&gt; Settings&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;\/ul&gt;<br \/>\n    &lt;\/div&gt; &lt;!&#8211; vertical-tab-list &#8211;&gt;<br \/>\n    &lt;div class=&quot;tab-content&quot;&gt;<br \/>\n        &lt;div class=&quot;tab-pane active&quot; id=&quot;home3&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n        &lt;div class=&quot;tab-pane&quot; id=&quot;profile3&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n        &lt;div class=&quot;tab-pane&quot; id=&quot;messages3&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n        &lt;div class=&quot;tab-pane&quot; id=&quot;settings3&quot;&gt;<br \/>\n            &#8230;<br \/>\n        &lt;\/div&gt;<br \/>\n    &lt;\/div&gt; &lt;!&#8211; tab-content &#8211;&gt;<br \/>\n&lt;\/div&gt; &lt;!&#8211; vertical-tabs-left &#8211;&gt;<br \/>\n                                [\/xml]\n                            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- panel show code --><br \/>\n                <\/section>\n<\/p><\/div>\n<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">Verticar Tabs: Bootstrap Plugin<\/h2>\n<p class=\"alert alert-royal\"><i class=\"fa fa-info\"><\/i> More information and instructions on the official website of the plugin: <a href=\"http:\/\/dbtek.github.io\/bootstrap-vertical-tabs\/\">http:\/\/dbtek.github.io\/bootstrap-vertical-tabs\/<\/a><\/p>\n<h3 class=\"right-line\">Left Menu<\/h3>\n<div class=\"row\">\n<div class=\"col-xs-3\">\n                        <!-- required for floating --><br \/>\n                        <!-- Nav tabs --><\/p>\n<ul class=\"nav nav-tabs tabs-left\">\n<li class=\"active\"><a href=\"#home4\" data-toggle=\"tab\">Home<\/a>\n                            <\/li>\n<li><a href=\"#profile4\" data-toggle=\"tab\">Profile<\/a>\n                            <\/li>\n<li><a href=\"#messages4\" data-toggle=\"tab\">Messages<\/a>\n                            <\/li>\n<li><a href=\"#settings4\" data-toggle=\"tab\">Settings<\/a>\n                            <\/li>\n<\/ul><\/div>\n<div class=\"col-xs-9\">\n                        <!-- Tab panes --><\/p>\n<div class=\"tab-content\">\n<div class=\"tab-pane active\" id=\"home4\">\n<h3 class=\"no-margin-top\">Home Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis!<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"profile4\">\n<h3 class=\"no-margin-top\">Profile Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"messages4\">\n<h3 class=\"no-margin-top\">Messages Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"settings4\">\n<h3 class=\"no-margin-top\">Settings Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at!<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<h3 class=\"right-line\">Right Menu<\/h3>\n<div class=\"row\">\n<div class=\"col-xs-9\">\n                        <!-- Tab panes --><\/p>\n<div class=\"tab-content\">\n<div class=\"tab-pane active\" id=\"home5\">\n<h3 class=\"no-margin-top\">Home Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis!<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"profile5\">\n<h3 class=\"no-margin-top\">Profile Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"messages5\">\n<h3 class=\"no-margin-top\">Messages Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"settings5\">\n<h3 class=\"no-margin-top\">Settings Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at!<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-xs-3\">\n                        <!-- required for floating --><br \/>\n                        <!-- Nav tabs --><\/p>\n<ul class=\"nav nav-tabs tabs-right\">\n<li class=\"active\"><a href=\"#home5\" data-toggle=\"tab\">Home<\/a>\n                            <\/li>\n<li><a href=\"#profile5\" data-toggle=\"tab\">Profile<\/a>\n                            <\/li>\n<li><a href=\"#messages5\" data-toggle=\"tab\">Messages<\/a>\n                            <\/li>\n<li><a href=\"#settings5\" data-toggle=\"tab\">Settings<\/a>\n                            <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<h3 class=\"right-line\">Left Menu Vertical Text<\/h3>\n<div class=\"row\">\n<div class=\"col-xs-2\">\n                        <!-- required for floating --><br \/>\n                        <!-- Nav tabs --><\/p>\n<ul class=\"nav nav-tabs tabs-left sideways\">\n<li class=\"active\"><a href=\"#home6\" data-toggle=\"tab\">Home<\/a>\n                            <\/li>\n<li><a href=\"#profile6\" data-toggle=\"tab\">Profile<\/a>\n                            <\/li>\n<li><a href=\"#messages6\" data-toggle=\"tab\">Messages<\/a>\n                            <\/li>\n<li><a href=\"#settings6\" data-toggle=\"tab\">Settings<\/a>\n                            <\/li>\n<\/ul><\/div>\n<div class=\"col-xs-10\">\n                        <!-- Tab panes --><\/p>\n<div class=\"tab-content\">\n<div class=\"tab-pane active\" id=\"home6\">\n<h3 class=\"no-margin-top\">Home Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis!<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"profile6\">\n<h3 class=\"no-margin-top\">Profile Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"messages6\">\n<h3 class=\"no-margin-top\">Messages Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda.<\/p>\n<\/p><\/div>\n<div class=\"tab-pane\" id=\"settings6\">\n<h3 class=\"no-margin-top\">Settings Tab<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at!<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Vertical Tabs: Left Menu Home Profile Messages Settings Home Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis! Profile Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci. Messages Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda. Settings Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at! Show Code [xml] &lt;div class=&quot;vertical-tabs-left&quot;&gt; &lt;div class=&quot;vertical-tab-list&quot;&gt; &lt;ul class=&quot;nav&quot;&gt; &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#home2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;\/i&gt; Home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#profile2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;\/i&gt; Profile&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#messages2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;\/i&gt; Messages&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&quot;#settings2&quot; data-toggle=&quot;tab&quot;&gt;&lt;i class=&quot;fa fa-gear&quot;&gt;&lt;\/i&gt; Settings&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/div&gt; &lt;!&#8211; vertical-tab-list &#8211;&gt; &lt;div class=&quot;tab-content&quot;&gt; &lt;div class=&quot;tab-pane active&quot; id=&quot;home2&quot;&gt; &#8230; &lt;\/div&gt; &lt;div class=&quot;tab-pane&quot; id=&quot;profile2&quot;&gt; &#8230; &lt;\/div&gt; &lt;div class=&quot;tab-pane&quot; id=&quot;messages2&quot;&gt; &#8230; &lt;\/div&gt; &lt;div class=&quot;tab-pane&quot; id=&quot;settings2&quot;&gt; &#8230; &lt;\/div&gt; &lt;\/div&gt; &lt;!&#8211; tab-content &#8211;&gt; &lt;\/div&gt; &lt;!&#8211; vertical-tabs-left &#8211;&gt; [\/xml] Vertical Tabs: Right Menu Home Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ipsa nostrum blanditiis sint temporibus atque modi amet vitae soluta ab sapiente odio id, perspiciatis ullam accusantium quam error quibusdam illum, ipsum quos a exercitationem optio! Asperiores, ipsum consequuntur perspiciatis impedit. Cum fugit numquam nihil optio similique consequatur cumque voluptates omnis! Profile Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, recusandae! Optio sint sequi vel tempora quibusdam ratione repellendus, aliquid expedita saepe voluptate quaerat qui tenetur provident, nulla a sunt nobis aperiam excepturi voluptatibus illum soluta rerum consectetur! Reiciendis minima praesentium quis cum, soluta perspiciatis magni nesciunt aut provident repellat, adipisci. Messages Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptate blanditiis, magni saepe, aspernatur dolores! Enim amet eum doloribus unde est quasi, rem quas ducimus, ab odio modi, recusandae illum mollitia nihil sunt, minima nostrum accusantium in. Blanditiis dolore doloremque autem velit cum, quas pariatur, porro in, aut id assumenda. Settings Tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ullam ipsam cumque quisquam odit harum et aspernatur, quia unde nostrum, pariatur adipisci temporibus officiis illo nobis corporis exercitationem. Ex, nihil, porro. Voluptates eaque, necessitatibus autem harum quisquam ex eveniet maiores aperiam, quaerat odio quos perferendis tenetur voluptas quia sint at! Home [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"footnotes":""},"class_list":["post-394","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":0,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/394\/revisions"}],"wp:attachment":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/media?parent=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}