{"id":876,"date":"2013-04-02T13:31:31","date_gmt":"2013-04-02T13:31:31","guid":{"rendered":"http:\/\/www.kriesi.at\/themes\/enfold\/?page_id=876"},"modified":"2013-04-02T13:31:31","modified_gmt":"2013-04-02T13:31:31","slug":"toggles-accordions","status":"publish","type":"page","link":"https:\/\/watanuki.jp\/?page_id=876","title":{"rendered":"Toggles &#038; Accordions"},"content":{"rendered":"<div class='avia_textblock '><h3>Accordion &amp; Toggles<\/h3>\n<ul>\n<li>Any number of toggle\/accordion elements are possible.<\/li>\n<li>You can either run them in accordion mode (only one open element) or in toggle mode (multiple open elmenets)<\/li>\n<li>Deeplinking support via hashtag (click on one item and see how the page url changes. You can link to the site with this url and the correct toggle will be opened)<\/li>\n<li>If you got a large number of toggles you can make them sortable by any number of tags<\/li>\n<\/ul>\n<\/div>\n<div class=\"togglecontainer toggle_close_all \">\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-1\" class=\"toggler activeTitle\">You can have open Toggles by default<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-1-container\" class=\"toggle_wrap activeToggle\" ><div class=\"toggle_content invers-color\"><p><strong>Behavior<\/strong><\/p>\n<p>Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-2\" class=\"toggler \">Funky<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-2-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Add\/Edit Toggles<\/strong><\/p>\n<p>Here you can add, remove and edit the toggles you want to display.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-3\" class=\"toggler \">Lorem<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-3-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.<\/p>\n<\/div><\/div><\/div>\n<\/div>\n<div style='height:30px' class='hr hr-invisible '><span class='hr-inner'><span class='hr-inner-style'><\/span><\/span><\/div>\n<div class=\"flex_column av_one_half first  \"><div class='avia_textblock '><h3>One toggle open at a time<\/h3>\n<\/div><br \/>\n<div class=\"togglecontainer toggle_close_all \">\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-4\" class=\"toggler \">Toggle 2<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-4-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Initial Open<\/strong><\/p>\n<p>Enter the Number of the Accordion Item that should be open initially. Set to Zero if all should be close on page load<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-5\" class=\"toggler \">Toggle 1<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-5-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Behavior<\/strong><\/p>\n<p>Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-6\" class=\"toggler \">Funky<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-6-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Add\/Edit Toggles<\/strong><\/p>\n<p>Here you can add, remove and edit the toggles you want to display.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-7\" class=\"toggler \">Lorem<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-7-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/p>\n<\/div>\n<div class=\"flex_column av_one_half   \"><div class='avia_textblock '><h3>Multiple open toggles possible<\/h3>\n<\/div><br \/>\n<div class=\"togglecontainer \">\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-8\" class=\"toggler \">Toggle 2<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-8-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Initial Open<\/strong><\/p>\n<p>Enter the Number of the Accordion Item that should be open initially. Set to Zero if all should be close on page load<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-9\" class=\"toggler \">Toggle 1<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-9-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Behavior<\/strong><\/p>\n<p>Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-10\" class=\"toggler \">Funky<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-10-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p><strong>Add\/Edit Toggles<\/strong><\/p>\n<p>Here you can add, remove and edit the toggles you want to display.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-11\" class=\"toggler \">Lorem<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-11-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis<\/p>\n<\/div><\/div><\/div>\n<\/div><\/p>\n<\/div>\n<div class=\"flex_column av_one_full first  \"><div class='avia_textblock '><h3>Sortable<\/h3>\n<\/div><br \/>\n<div class=\"togglecontainer toggle_close_all \"><div class='taglist'><a href='#' data-tag='{All}' class='activeFilter'>All<\/a><span class='tag-seperator'>\/<\/span><a href='#' data-tag='{Installation}' class=''>Installation<\/a><span class='tag-seperator'>\/<\/span><a href='#' data-tag='{Misc}' class=''>Misc<\/a><span class='tag-seperator'>\/<\/span><a href='#' data-tag='{Pre Sales}' class=''>Pre Sales<\/a><span class='tag-seperator'>\/<\/span><a href='#' data-tag='{Pricing}' class=''>Pricing<\/a><span class='tag-seperator'>\/<\/span><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Installation} {Misc} \" ><p data-fake-id=\"#toggle-id-12\" class=\"toggler \">Are there additional costs?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-12-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <strong>Aenean<\/strong> massa. Cum sociis natoque penatibus et magnis dis parturient montes, <strong>nascetur<\/strong> ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Installation} \" ><p data-fake-id=\"#toggle-id-13\" class=\"toggler \">Support Included?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-13-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. <strong>Vivamus<\/strong> elementum semper nisi. Aenean vulputate eleifend tellus.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pricing} {Misc} \" ><p data-fake-id=\"#toggle-id-14\" class=\"toggler \">How to set up the theme?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-14-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Nullam sagittis. Suspendisse pulvinar, augue ac venenatis <strong>condimentum<\/strong>, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante <strong>ipsum<\/strong> primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pricing} \" ><p data-fake-id=\"#toggle-id-15\" class=\"toggler \">What about Refunds?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-15-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <strong>magnis<\/strong> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Installation} {Misc} \" ><p data-fake-id=\"#toggle-id-16\" class=\"toggler \">Can I change Plans or cancel at any time?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-16-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <strong>Aenean<\/strong> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pre Sales} \" ><p data-fake-id=\"#toggle-id-17\" class=\"toggler \">Support Included?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-17-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. <strong>Vivamus<\/strong> elementum semper nisi. Aenean vulputate eleifend tellus.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Installation} {Pre Sales} \" ><p data-fake-id=\"#toggle-id-18\" class=\"toggler \">How to set up the theme?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-18-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Nullam sagittis. Suspendisse pulvinar, augue ac venenatis <strong>condimentum<\/strong>, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante <strong>ipsum<\/strong> primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pre Sales} {Pricing} \" ><p data-fake-id=\"#toggle-id-19\" class=\"toggler \">Can I change Plans or cancel at any time?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-19-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <strong>Aenean<\/strong> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pre Sales} \" ><p data-fake-id=\"#toggle-id-20\" class=\"toggler \">What about Refunds?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-20-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <strong>magnis<\/strong> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pricing} {Misc} \" ><p data-fake-id=\"#toggle-id-21\" class=\"toggler \">How to set up the theme?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-21-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Nullam sagittis. Suspendisse pulvinar, augue ac venenatis <strong>condimentum<\/strong>, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante <strong>ipsum<\/strong> primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-22\" class=\"toggler \">Are there additional costs?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-22-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <strong>Aenean<\/strong> massa. Cum sociis natoque penatibus et magnis dis parturient montes, <strong>nascetur<\/strong> ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pre Sales} \" ><p data-fake-id=\"#toggle-id-23\" class=\"toggler \">Can I change Plans or cancel at any time?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-23-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <strong>Aenean<\/strong> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pricing} \" ><p data-fake-id=\"#toggle-id-24\" class=\"toggler \">Are there additional costs?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-24-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <strong>Aenean<\/strong> massa. Cum sociis natoque penatibus et magnis dis parturient montes, <strong>nascetur<\/strong> ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} {Pricing} \" ><p data-fake-id=\"#toggle-id-25\" class=\"toggler \">Support Included?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-25-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. <strong>Vivamus<\/strong> elementum semper nisi. Aenean vulputate eleifend tellus.<\/p>\n<\/div><\/div><\/div>\n<div class=\"single_toggle\" data-tags=\"{All} \" ><p data-fake-id=\"#toggle-id-26\" class=\"toggler \">What about Refunds?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id=\"toggle-id-26-container\" class=\"toggle_wrap \" ><div class=\"toggle_content invers-color\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <strong>magnis<\/strong> dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":750,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/watanuki.jp\/index.php?rest_route=\/wp\/v2\/pages\/876"}],"collection":[{"href":"https:\/\/watanuki.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/watanuki.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/watanuki.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/watanuki.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=876"}],"version-history":[{"count":0,"href":"https:\/\/watanuki.jp\/index.php?rest_route=\/wp\/v2\/pages\/876\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/watanuki.jp\/index.php?rest_route=\/wp\/v2\/pages\/750"}],"wp:attachment":[{"href":"https:\/\/watanuki.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}