{"id":25645,"date":"2017-10-05T10:37:00","date_gmt":"2017-10-05T08:37:00","guid":{"rendered":"https:\/\/janthielemann.de\/?page_id=25645"},"modified":"2018-08-12T09:37:10","modified_gmt":"2018-08-12T07:37:10","slug":"accordion-for-divi","status":"publish","type":"page","link":"https:\/\/janthielemann.de\/accordion-for-divi\/","title":{"rendered":"Accordion for Divi"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”3.0.67″ background_image=”https:\/\/janthielemann.de\/wp-content\/uploads\/2017\/04\/bg_footer.jpg” parallax=”on” parallax_method=”off”][et_pb_row use_custom_width=”on” custom_width_px=”780px” custom_padding=”104px||104px|” padding_mobile=”on” column_padding_mobile=”on” parallax_method_1=”off” _builder_version=”3.0.50″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ column_padding_mobile=”on” parallax=”off” parallax_method=”off”][et_pb_text admin_label=”Break the limits with” _builder_version=”3.0.69″ text_font=”Roboto||||” text_text_color=”#a5bdc9″ text_font_size=”24″ text_line_height=”1.4em” text_orientation=”center” module_alignment=”center” border_style=”solid”]Break the limits with
\n[\/et_pb_text][et_pb_text admin_label=”Accordion for Divi” _builder_version=”3.0.69″ text_font=”Roboto Light||||” text_text_color=”#ffffff” text_font_size=”56″ text_line_height=”1.2em” text_orientation=”center” module_alignment=”center” custom_css_main_element=”font-weight: 300;” border_style=”solid”]Accordion for Divi
\n[\/et_pb_text][et_pb_text _builder_version=”3.0.69″ text_font=”Roboto Light||||” text_text_color=”#a4bbc7″ text_font_size=”24″ text_line_height=”1.5em” text_orientation=”center” module_alignment=”center” custom_margin=”24px||40px|” custom_css_main_element=”font-weight: 300;” border_style=”solid”]Create beautiful and reusable Accordions with the powerful and highly customizable Accordion for Divi Module.
\n[\/et_pb_text][et_pb_button button_url=”https:\/\/elegantmarketplace.com\/downloads\/accordion-for-divi\/” url_new_window=”on” button_text=”BUY NOW” button_alignment=”center” admin_label=”Buy Now” _builder_version=”3.1.1″ custom_button=”on” button_text_size=”15″ button_text_color=”#ffffff” button_bg_color=”#3644AF” button_border_color=”#3644AF” button_border_radius=”3px” button_letter_spacing=”1″ button_font=”Roboto||||” button_icon=”%%114%%” button_icon_placement=”left” button_text_color_hover=”#3644af” button_bg_color_hover=”#ffffff” button_border_color_hover=”#3644af” button_border_radius_hover=”3px” button_letter_spacing_hover=”1″][\/et_pb_button][et_pb_button button_url=”#features” button_text=”SEE IN ACTION” button_alignment=”center” admin_label=”Learn More” _builder_version=”3.2.1″ custom_button=”on” button_text_size=”15″ button_text_color=”#3644AF” button_bg_color=”#dddddd” button_border_color=”#ffffff” button_border_radius=”3px” button_letter_spacing=”1″ button_font=”Roboto||||” button_icon=”%%84%%” button_icon_placement=”left” button_text_color_hover=”#ffffff” button_bg_color_hover=”#3644af” button_border_color_hover=”#ffffff” button_border_radius_hover=”3px” button_letter_spacing_hover=”1″ custom_css_main_element=”margin-top: 20px”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”features” _builder_version=”3.0.69″][et_pb_row custom_padding=”84px|||” _builder_version=”3.0.51″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text _builder_version=”3.0.69″ module_alignment=”left” border_style=”solid”]<\/p>\n

Demo<\/h2>\n

Here are some examples of how you can style Accordion for Divi.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding=”84px|||” _builder_version=”3.0.51″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text admin_label=”Toggle Style” _builder_version=”3.0.69″ module_alignment=”left” border_style=”solid”]<\/p>\n

Toggle Style<\/h3>\n

When using the Toggle style, each toggle can be opened and closed individually.<\/p>\n

[\/et_pb_text][et_pb_jt_accordion include_categories=”53″ accordion_style=”toggle” toggle_border_style=”solid” _builder_version=”3.2.1″ title_font=”||||||||” body_font_size_tablet=”51″ body_line_height_tablet=”2″][\/et_pb_jt_accordion][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding=”84px|||” _builder_version=”3.0.51″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text admin_label=”Accordion Style” _builder_version=”3.0.69″ module_alignment=”left” border_style=”solid”]<\/p>\n

Accordion Style<\/h3>\n

When using the Accordion style, there will be always one open toggle. Opening another toggle closes the currently open one.<\/p>\n

[\/et_pb_text][et_pb_jt_accordion include_categories=”53″ toggle_border_style=”solid” _builder_version=”3.0.69″ body_font_size_tablet=”51″ body_line_height_tablet=”2″][\/et_pb_jt_accordion][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding=”84px|||” _builder_version=”3.0.51″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text admin_label=”Accordion Style” _builder_version=”3.0.69″ module_alignment=”left” border_style=”solid”]<\/p>\n

Styling Options<\/h3>\n

Accordion for Divi has way more powerful styling options than the default Accordion module. You can change colors, borders and even the toggle icons – and if there is no setting (yet), there is a CSS field for every element.<\/p>\n

[\/et_pb_text][et_pb_jt_accordion include_categories=”53″ accordion_style=”toggle” icon_closed=”%%36%%” icon_open=”%%34%%” icon_closed_color=”#e09900″ icon_open_color=”#7cda24″ toggle_closed_background=”#ffffff” toggle_open_background=”#ffffff” toggle_border_color=”#e02b20″ toggle_border_style=”solid” _builder_version=”3.0.69″ title_text_color=”#0c71c3″ title_font_size=”1.5em” title_line_height=”1.5em” body_text_color=”#8300e9″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ use_background_color_gradient=”on” custom_padding=”20px|20px|20px|20px” custom_css_toggle_normal=”border-radius: 32px;||overflow: hidden;”][\/et_pb_jt_accordion][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”3.0.47″][et_pb_fullwidth_header title=”Fullwidth Module” text_orientation=”center” _builder_version=”3.2″ title_level=”h2″ title_text_align=”center” content_text_align=”center” background_color=”rgba(255, 255, 255, 0)” background_size=”initial” background_position=”top_left” background_repeat=”repeat” background_layout=”light”]<\/p>\n

Accordion for Divi is available as Fullwidth Module as well. However, Divi applies some default Styles to Fullwidth Sections which could mess up your page styles if using the Divi Builder for the Accordion Items. An alternative way of achieving a fullwidth Accordion for Divi would be to use a normal Section\/Row and make the Row fullwidth with a custom width of 100% instead.<\/p>\n

[\/et_pb_fullwidth_header][et_pb_jt_accordion_fullwidth include_categories=”53″ accordion_style=”toggle” toggle_border_style=”solid” _builder_version=”3.0.86″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][\/et_pb_jt_accordion_fullwidth][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”documentation” _builder_version=”3.0.69″][et_pb_row custom_padding=”84px|||” _builder_version=”3.0.51″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text _builder_version=”3.0.69″ module_alignment=”left” border_style=”solid”]<\/p>\n

Documentation<\/h2>\n

Here you find the answers to the most common questions and problems.<\/p>\n

[\/et_pb_text][et_pb_jt_accordion include_categories=”49,52,48″ accordion_style=”toggle” toggle_border_style=”solid” _builder_version=”3.0.82″ body_font_size_tablet=”51″ body_line_height_tablet=”2″][\/et_pb_jt_accordion][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”contact” _builder_version=”3.0.67″ background_image=”https:\/\/janthielemann.de\/wp-content\/uploads\/2017\/04\/bg_footer.jpg” parallax=”on” parallax_method=”off”][et_pb_row custom_padding=”84px|||” _builder_version=”3.0.51″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_contact_form email=”material-blurb@janthielemann.de” title=”Support & Feature Suggestions” module_id=”et_pb_contact_form_0″ _builder_version=”3.0.51″ title_text_color=”#ffffff” custom_button=”on” button_text_color=”#ffffff” button_border_color=”#ffffff”][et_pb_contact_field field_id=”Name” field_title=”Name” _builder_version=”3.0.47″ border_radii=”on||||”][\/et_pb_contact_field][et_pb_contact_field field_id=”Email” field_title=”Email Address” field_type=”email” _builder_version=”3.0.47″ border_radii=”on||||”][\/et_pb_contact_field][et_pb_contact_field field_id=”Message” field_title=”Message” field_type=”text” fullwidth_field=”on” _builder_version=”3.0.47″ border_radii=”on||||”][\/et_pb_contact_field][\/et_pb_contact_form][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”3.0.69″ custom_padding=”40px|||” global_module=”25630″][et_pb_fullwidth_code _builder_version=”3.0.69″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]<h2 style="text-align: center; margin-top: 10px;">Check out our other Divi Modules<\/h2>[\/et_pb_fullwidth_code][et_pb_fullwidth_menu menu_id=”36″ submenu_direction=”downwards” fullwidth_menu=”off” _builder_version=”3.0.67″ text_orientation=”center”][\/et_pb_fullwidth_menu][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Break the limits with Accordion for Divi Create beautiful and reusable Accordions with the powerful and highly customizable Accordion for Divi Module. Demo Here are some examples of how you can style Accordion for Divi. Toggle Style When using the Toggle style, each toggle can be opened and closed individually. Accordion Style When using the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"

[et_pb_section bb_built=\"1\"][et_pb_row][\/et_pb_row][et_pb_row][\/et_pb_row][\/et_pb_section]<\/p>","_et_gb_content_width":"","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"dipi_cpt_category":[],"yoast_head":"\nAccordion for Divi - Jan Thielemann<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/janthielemann.de\/accordion-for-divi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accordion for Divi - Jan Thielemann\" \/>\n<meta property=\"og:url\" content=\"https:\/\/janthielemann.de\/accordion-for-divi\/\" \/>\n<meta property=\"og:site_name\" content=\"Jan Thielemann\" \/>\n<meta property=\"article:modified_time\" content=\"2018-08-12T07:37:10+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/janthielemann.de\/accordion-for-divi\/\",\"url\":\"https:\/\/janthielemann.de\/accordion-for-divi\/\",\"name\":\"Accordion for Divi - Jan Thielemann\",\"isPartOf\":{\"@id\":\"https:\/\/janthielemann.de\/#website\"},\"datePublished\":\"2017-10-05T08:37:00+00:00\",\"dateModified\":\"2018-08-12T07:37:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/janthielemann.de\/accordion-for-divi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/janthielemann.de\/accordion-for-divi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/janthielemann.de\/accordion-for-divi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/janthielemann.de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accordion for Divi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/janthielemann.de\/#website\",\"url\":\"https:\/\/janthielemann.de\/\",\"name\":\"Jan Thielemann\",\"description\":\"Developer, Designer, Teacher\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/janthielemann.de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accordion for Divi - Jan Thielemann","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/janthielemann.de\/accordion-for-divi\/","og_locale":"en_US","og_type":"article","og_title":"Accordion for Divi - Jan Thielemann","og_url":"https:\/\/janthielemann.de\/accordion-for-divi\/","og_site_name":"Jan Thielemann","article_modified_time":"2018-08-12T07:37:10+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/janthielemann.de\/accordion-for-divi\/","url":"https:\/\/janthielemann.de\/accordion-for-divi\/","name":"Accordion for Divi - Jan Thielemann","isPartOf":{"@id":"https:\/\/janthielemann.de\/#website"},"datePublished":"2017-10-05T08:37:00+00:00","dateModified":"2018-08-12T07:37:10+00:00","breadcrumb":{"@id":"https:\/\/janthielemann.de\/accordion-for-divi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/janthielemann.de\/accordion-for-divi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/janthielemann.de\/accordion-for-divi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/janthielemann.de\/"},{"@type":"ListItem","position":2,"name":"Accordion for Divi"}]},{"@type":"WebSite","@id":"https:\/\/janthielemann.de\/#website","url":"https:\/\/janthielemann.de\/","name":"Jan Thielemann","description":"Developer, Designer, Teacher","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/janthielemann.de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/pages\/25645"}],"collection":[{"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/comments?post=25645"}],"version-history":[{"count":10,"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/pages\/25645\/revisions"}],"predecessor-version":[{"id":26165,"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/pages\/25645\/revisions\/26165"}],"wp:attachment":[{"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/media?parent=25645"}],"wp:term":[{"taxonomy":"dipi_cpt_category","embeddable":true,"href":"https:\/\/janthielemann.de\/wp-json\/wp\/v2\/dipi_cpt_category?post=25645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}