{"id":116,"date":"2016-01-10T06:13:55","date_gmt":"2016-01-10T06:13:55","guid":{"rendered":"http:\/\/bne-themes.dev\/sweetness\/?page_id=116"},"modified":"2016-04-29T18:47:10","modified_gmt":"2016-04-30T01:47:10","slug":"tabs-and-toggles","status":"publish","type":"page","link":"https:\/\/demo.bnecreative.com\/story\/tabs-and-toggles\/","title":{"rendered":"Tabs and Toggles"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h3>Tabs<\/h3>\n<div class=\"tabbable bne-tabs-framed tabs-above  clearfix\"><ul class=\"nav nav-tabs\"><li class=\"active\"><a href=\"#tab_182\" data-toggle=\"tab\"><i class=\"bne-fa fa fa-pencil\"><\/i>  Tab Title #1<\/a><\/li>\n<li class=\"\"><a href=\"#tab_501\" data-toggle=\"tab\"><i class=\"bne-fa fa fa-cc-stripe\"><\/i>  Tab Title #2<\/a><\/li>\n<li class=\"\"><a href=\"#my_tab\" data-toggle=\"tab\"> Tab Title #3<\/a><\/li><\/ul><div class=\"tab-content\"><div id=\"tab_182\" class=\"tab-pane fade in active clearfix\">\n<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.<\/p>\n<\/div>\n\n<div id=\"tab_501\" class=\"tab-pane fade in  clearfix\">\n<p><strong>The second\u00a0tab<\/strong>&#8230;Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div>\n\n<div id=\"my_tab\" class=\"tab-pane fade in  clearfix\">\n<p><strong>The third\u00a0tab<\/strong>&#8230;. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.<\/p>\n<p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div>\n<\/div><!-- .tab-content (end) --><\/div><!-- .tabs-framed (end) -->\n<h3>Left Tab Side Navigation<\/h3>\n<div class=\"tabbable bne-tabs-framed tabs-side tabs-left  clearfix\"><ul class=\"nav nav-tabs\"><li class=\"active\"><a href=\"#tab_449\" data-toggle=\"tab\"><i class=\"bne-fa fa fa-pencil\"><\/i>  Tab Title #1<\/a><\/li>\n<li class=\"\"><a href=\"#tab_261\" data-toggle=\"tab\"><i class=\"bne-fa fa fa-cc-stripe\"><\/i>  Tab Title #2<\/a><\/li>\n<li class=\"\"><a href=\"#tab_517\" data-toggle=\"tab\"> Tab Title #3<\/a><\/li><\/ul><div class=\"tab-content\"><div id=\"tab_449\" class=\"tab-pane fade in active clearfix\">\n<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div>\n\n<div id=\"tab_261\" class=\"tab-pane fade in  clearfix\">\n<p><strong>The second\u00a0tab<\/strong>&#8230; The third\u00a0tab&#8230;. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n<p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div>\n\n<div id=\"tab_517\" class=\"tab-pane fade in  clearfix\">\n<p><strong>The third\u00a0tab<\/strong>&#8230;. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.<\/p>\n<p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div>\n<\/div><!-- .tab-content (end) --><\/div><!-- .tabs-framed (end) -->\n<h3>Right Tab Side Navigation<\/h3>\n<div class=\"tabbable bne-tabs-framed tabs-side tabs-right  clearfix\"><ul class=\"nav nav-tabs\"><li class=\"active\"><a href=\"#tab_783\" data-toggle=\"tab\"><i class=\"bne-fa fa fa-pencil\"><\/i>  Tab Title #1<\/a><\/li>\n<li class=\"\"><a href=\"#tab_496\" data-toggle=\"tab\"><i class=\"bne-fa fa fa-cc-stripe\"><\/i>  Tab Title #2<\/a><\/li>\n<li class=\"\"><a href=\"#tab_434\" data-toggle=\"tab\"> Tab Title #3<\/a><\/li><\/ul><div class=\"tab-content\"><div id=\"tab_783\" class=\"tab-pane fade in active clearfix\">\n<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.<\/p>\n<\/div>\n\n<div id=\"tab_496\" class=\"tab-pane fade in  clearfix\">\n<p><strong>The second\u00a0tab<\/strong>&#8230;Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.<\/div>\n\n<div id=\"tab_434\" class=\"tab-pane fade in  clearfix\">\n<p><strong>The third\u00a0tab<\/strong>&#8230;. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.<\/p>\n<\/div>\n<\/div><!-- .tab-content (end) --><\/div><!-- .tabs-framed (end) -->\n<p>&nbsp;<\/p>\n<div class=\"divider  divider-solid divider-center\" style=\"border-color:#ccc; width:100%;\"><\/div><div class=\"clear\"><\/div>\n<p>&nbsp;<\/p>\n<h2>Toggles<\/h2>\n<p>One thing that may be confusing about this section is distinguishing the difference between \u201cToggles\u201d and an \u201cAccordion\u201d \u2014 A toggle allows you to hide a piece of content and let the user open and close it. You can stack many of these toggles in a row for a nice way of organizing content in your page or post. Then, in addition to that you can wrap your set of toggles with the \u201caccordion\u201d shortcode to group them together. This means that your set of toggles will now take on the traditional accordion concept of only allowing one toggle open at any given time.<\/p>\n<div class=\"bne-panel bne-toggle panel panel-default\"><div class=\"panel-heading\"><a href=\"#toggle_543313249\" class=\"panel-title collapsed\" data-toggle=\"collapse\" data-parent=\"\"><span><i class=\"bne-fa fas fa-plus\"><\/i> Toggle Title #1<\/span><\/a><\/div><!-- .panel-heading (end) --><div id=\"toggle_543313249\" class=\"panel-collapse collapse \"><div class=\"panel-body\">content goes here&#8230;<\/div><!-- .panel-body (end) --><\/div><!-- .panel-collapse (end) --><\/div><!-- .panel-collapse (end) -->\n<div class=\"bne-panel bne-toggle panel panel-default\"><div class=\"panel-heading\"><a href=\"#toggle_177663505\" class=\"panel-title collapsed\" data-toggle=\"collapse\" data-parent=\"\"><span><i class=\"bne-fa fas fa-plus\"><\/i> Toggle Title #2<\/span><\/a><\/div><!-- .panel-heading (end) --><div id=\"toggle_177663505\" class=\"panel-collapse collapse \"><div class=\"panel-body\">content goes here&#8230;<\/div><!-- .panel-body (end) --><\/div><!-- .panel-collapse (end) --><\/div><!-- .panel-collapse (end) -->\n<div class=\"bne-panel bne-toggle panel panel-default last-panel\"><div class=\"panel-heading\"><a href=\"#toggle_1585408962\" class=\"panel-title collapsed\" data-toggle=\"collapse\" data-parent=\"\"><span><i class=\"bne-fa fas fa-plus\"><\/i> Toggle Title #3<\/span><\/a><\/div><!-- .panel-heading (end) --><div id=\"toggle_1585408962\" class=\"panel-collapse collapse \"><div class=\"panel-body\">content goes here&#8230;<\/div><!-- .panel-body (end) --><\/div><!-- .panel-collapse (end) --><\/div><!-- .panel-collapse (end) -->\n<div class=\"alert-wrapper\"><div class=\"alert alert-info \" ><div class=\"alert-content\"><strong>Note:<\/strong> If this is a group of toggles that aren\u2019t wrapped in an accordion, as the above example above shows, you can use the word \u201clast\u201d on the last toggle to the theme can apply some margin below the last toggle to separate from any content to come after. This is optional.<\/div><\/div><!-- .alert (end) --><\/div><!-- .alert-wrapper (end) -->\n<p>&nbsp;<\/p>\n<div class=\"divider  divider-solid divider-center\" style=\"border-color:#ccc; width:100%;\"><\/div><div class=\"clear\"><\/div>\n<p>&nbsp;<\/p>\n<h2>Accordion<\/h2>\n<p>So now that you\u2019ve got a set of toggles, what if you want to group them together as a traditional accordion? You can do this simply wrapping your toggles in the <code>[accordion]] ... [[\/accordion]<\/code> shortcode.<br \/>\n<div id=\"accordion_14615894636aa2060fa9146\" class=\"bne-accordion panel-group\">\n<div class=\"bne-panel bne-toggle panel panel-default\"><div class=\"panel-heading\"><a href=\"#toggle_637503229\" class=\"panel-title collapsed\" data-toggle=\"collapse\" data-parent=\"\"><span><i class=\"bne-fa fas fa-plus\"><\/i> Toggle Title #1<\/span><\/a><\/div><!-- .panel-heading (end) --><div id=\"toggle_637503229\" class=\"panel-collapse collapse \"><div class=\"panel-body\">content goes here&#8230;<\/div><!-- .panel-body (end) --><\/div><!-- .panel-collapse (end) --><\/div><!-- .panel-collapse (end) -->\n<div class=\"bne-panel bne-toggle panel panel-default\"><div class=\"panel-heading\"><a href=\"#toggle_1014077346\" class=\"panel-title collapsed\" data-toggle=\"collapse\" data-parent=\"\"><span><i class=\"bne-fa fas fa-plus\"><\/i> Toggle Title #2<\/span><\/a><\/div><!-- .panel-heading (end) --><div id=\"toggle_1014077346\" class=\"panel-collapse collapse \"><div class=\"panel-body\">content goes here&#8230;<\/div><!-- .panel-body (end) --><\/div><!-- .panel-collapse (end) --><\/div><!-- .panel-collapse (end) -->\n<div class=\"bne-panel bne-toggle panel panel-default last-panel\"><div class=\"panel-heading\"><a href=\"#toggle_300064858\" class=\"panel-title collapsed\" data-toggle=\"collapse\" data-parent=\"\"><span><i class=\"bne-fa fas fa-plus\"><\/i> Toggle Title #3<\/span><\/a><\/div><!-- .panel-heading (end) --><div id=\"toggle_300064858\" class=\"panel-collapse collapse \"><div class=\"panel-body\">content goes here&#8230;<\/div><!-- .panel-body (end) --><\/div><!-- .panel-collapse (end) --><\/div><!-- .panel-collapse (end) -->\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Tabs Left Tab Side Navigation Right Tab Side Navigation &nbsp; &nbsp; Toggles One thing that may be confusing about this section is distinguishing the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-116","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/pages\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":3,"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/pages\/116\/revisions"}],"predecessor-version":[{"id":3492,"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/pages\/116\/revisions\/3492"}],"wp:attachment":[{"href":"https:\/\/demo.bnecreative.com\/story\/wp-json\/wp\/v2\/media?parent=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}