{"id":1488,"date":"2021-01-11T18:33:54","date_gmt":"2021-01-11T18:33:54","guid":{"rendered":"https:\/\/organicthemes.com\/demo\/origin\/?page_id=1488"},"modified":"2021-02-25T00:52:20","modified_gmt":"2021-02-25T00:52:20","slug":"toggle-block","status":"publish","type":"page","link":"https:\/\/organicthemes.com\/demo\/origin\/blocks\/toggle-block\/","title":{"rendered":"Toggle Block"},"content":{"rendered":"\n<h2 class=\"has-text-align-center wp-block-heading\">Toggle Block<\/h2>\n\n\n\n<p class=\"has-text-align-center\">The <a href=\"https:\/\/organicthemes.com\/blocks\"><strong>Toggle Block<\/strong><\/a> is designed to display nested blocks and information within a toggle element. It&#8217;s an excellent tool for creating FAQs, documentation, and much more. This page provides a few examples of the Toggle Block.<\/p>\n\n\n\n<div class=\"wp-block-obb-toggle-block organic-block obb-toggle obb-style-minimal obb-align-center\" style=\"background-color:#f4f4f4\"><div class=\"obb-toggle-trigger\"><p class=\"obb-toggle-title\">Default Toggle Style<\/p><i class=\"obb-toggle-icon obb-open fas fa-plus\" style=\"color:#999\"><\/i><i class=\"obb-toggle-icon obb-close fas fa-minus\" style=\"color:#999\"><\/i><\/div><div class=\"obb-toggle-content\" style=\"text-align:center\">\n<figure class=\"wp-block-image alignwide size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"338\" data-attachment-id=\"894\" data-permalink=\"https:\/\/organicthemes.com\/demo\/origin\/the-windows-of-absolute-night\/article-09\/\" data-orig-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?fit=1800%2C800&amp;ssl=1\" data-orig-size=\"1800,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"article-09\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?fit=300%2C133&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?fit=760%2C338&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?resize=760%2C338&#038;ssl=1\" alt=\"\" class=\"wp-image-894\" srcset=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?resize=1024%2C455&amp;ssl=1 1024w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?resize=768%2C341&amp;ssl=1 768w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?w=1800&amp;ssl=1 1800w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/article-09.jpg?w=1520&amp;ssl=1 1520w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p>This is an example of the default style for the <strong>Toggle Block<\/strong>. However, the block style may be customized considerably. Additionally, the <strong>Toggle Block<\/strong> can display a variety of other blocks within the toggle container.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-obb-toggle-block organic-block obb-toggle obb-style-bordered obb-align-left\" style=\"background-color:#f4f4f4\"><div class=\"obb-toggle-trigger\"><p class=\"obb-toggle-title\">Nested Content Types<\/p><i class=\"obb-toggle-icon obb-open fas fa-plus\" style=\"color:#999\"><\/i><i class=\"obb-toggle-icon obb-close fas fa-minus\" style=\"color:#999\"><\/i><\/div><div class=\"obb-toggle-content\" style=\"text-align:left\">\n<div class=\"wp-block-cover alignfull has-background-dim\" style=\"background-image:url(https:\/\/organicthemes.com\/demo\/origin\/files\/2016\/05\/header-03.jpg);min-height:240px;aspect-ratio:unset;\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h4 class=\"has-text-align-center wp-block-heading\">A Cover Block<\/h4>\n\n\n\n<p class=\"has-text-align-center\">Several block types can be added within the Toggle Block.<\/p>\n<\/div><\/div>\n\n\n\n<p>The <strong>Toggle Block<\/strong> allows for the addition of multiple content types within the toggle.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"338\" data-attachment-id=\"821\" data-permalink=\"https:\/\/organicthemes.com\/demo\/origin\/contact\/banner-05\/\" data-orig-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?fit=1800%2C800&amp;ssl=1\" data-orig-size=\"1800,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"banner-05\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?fit=300%2C133&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?fit=760%2C338&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?resize=760%2C338&#038;ssl=1\" alt=\"\" class=\"wp-image-821\" srcset=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?w=1800&amp;ssl=1 1800w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?resize=768%2C341&amp;ssl=1 768w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?resize=1024%2C455&amp;ssl=1 1024w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/banner-05.jpg?w=1520&amp;ssl=1 1520w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><figcaption>An image block.<\/figcaption><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">An Example Heading<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>My Example List Item<\/li><li>My Example List Item<\/li><li>My Example List Item<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-left\">Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n\n\n\n<div class=\"wp-block-button alignleft\"><a class=\"wp-block-button__link\" href=\"#\">An Example Button<\/a><\/div>\n\n\n\n<p><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-obb-toggle-block organic-block obb-toggle obb-style-minimal obb-align-center\" style=\"background-color:#f4f4f4\"><div class=\"obb-toggle-trigger\"><p class=\"obb-toggle-title\">Minimal Style Toggle<\/p><i class=\"obb-toggle-icon obb-open fas fa-plus\" style=\"color:#999\"><\/i><i class=\"obb-toggle-icon obb-close fas fa-minus\" style=\"color:#999\"><\/i><\/div><div class=\"obb-toggle-content\" style=\"text-align:center\">\n<p>This is an example of basic toggle content. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-obb-toggle-block organic-block obb-toggle obb-style-modern obb-align-center\" style=\"background-color:#00cccc;border-width:6px;border-style:solid;border-color:#2db4e9\"><div class=\"obb-toggle-trigger\"><p class=\"obb-toggle-title\"><span class=\"has-inline-color has-white-color\">Modern Colored Toggle<\/span><\/p><i class=\"obb-toggle-icon obb-open fas fa-plus\" style=\"color:#fff\"><\/i><i class=\"obb-toggle-icon obb-close fas fa-minus\" style=\"color:#fff\"><\/i><\/div><div class=\"obb-toggle-content\" style=\"text-align:center\">\n<p>This is an example of basic toggle content. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-obb-toggle-block organic-block obb-toggle obb-style-modern obb-align-center\" style=\"background-color:#f4f4f4\"><div class=\"obb-toggle-trigger\"><p class=\"obb-toggle-title\">Another Toggle Example<\/p><i class=\"obb-toggle-icon obb-open fas fa-plus\" style=\"color:#999\"><\/i><i class=\"obb-toggle-icon obb-close fas fa-minus\" style=\"color:#999\"><\/i><\/div><div class=\"obb-toggle-content\" style=\"text-align:center\">\n<h5 class=\"wp-block-heading\">Modern Style Toggle<\/h5>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"317\" data-attachment-id=\"1040\" data-permalink=\"https:\/\/organicthemes.com\/demo\/origin\/about\/header-02\/\" data-orig-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?fit=2400%2C1000&amp;ssl=1\" data-orig-size=\"2400,1000\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"header-02\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?fit=300%2C125&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?fit=760%2C317&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?resize=760%2C317&#038;ssl=1\" alt=\"\" class=\"wp-image-1040\" srcset=\"https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?resize=1024%2C427&amp;ssl=1 1024w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?resize=300%2C125&amp;ssl=1 300w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?w=1520&amp;ssl=1 1520w, https:\/\/i0.wp.com\/organicthemes.com\/demo\/origin\/files\/2015\/05\/header-02.jpg?w=2280&amp;ssl=1 2280w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote has-text-align-center is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8220;Multiple block types can be added within the <strong>Toggle Block<\/strong>.&#8221;<\/p><cite>\u2014 That&#8217;s Cool<\/cite><\/blockquote>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Toggle Block The Toggle Block is designed to display nested blocks and information within a toggle element. It&#8217;s an excellent tool for creating FAQs, documentation, and much more. This page provides a few examples of the Toggle Block.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1339,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-no-sidebar.php","meta":{"footnotes":""},"class_list":["post-1488","page","type-page","status-publish"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/comments?post=1488"}],"version-history":[{"count":13,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1488\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1488\/revisions\/1521"}],"up":[{"embeddable":true,"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/pages\/1339"}],"wp:attachment":[{"href":"https:\/\/organicthemes.com\/demo\/origin\/wp-json\/wp\/v2\/media?parent=1488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}