[et_pb_section fb_built=“1″ admin_label=“section“ _builder_version=“4.16″ custom_padding=“0px||0px||false|false“ global_colors_info=“{}“][et_pb_row admin_label=“row“ _builder_version=“4.16″ background_size=“initial“ background_position=“top_left“ background_repeat=“repeat“ global_colors_info=“{}“][et_pb_column type=“4_4″ _builder_version=“4.16″ custom_padding=“|||“ global_colors_info=“{}“ custom_padding__hover=“|||“][et_pb_text admin_label=“Text“ _builder_version=“4.19.2″ background_size=“initial“ background_position=“top_left“ background_repeat=“repeat“ hover_enabled=“0″ global_colors_info=“{}“ sticky_enabled=“0″]<\/p>\n
Neben der M\u00f6glichkeit mit einem so genannte Umschalter oder Akkordeon (Toogle) Inhalte ein- und auszublenden, gibt es mit ein bisschen Coding auch die M\u00f6glichkeit, ganze Zeilen oder Module ein- und auszublenden.<\/p>\n
Sehr sch\u00f6n erkl\u00e4rt wird das auf dieser Webseite: https:\/\/divibooster.com\/reveal-a-divi-module-or-row-section-when-button-clicked\/comment-page-4\/<\/a><\/p>\n In meinem Fall habe ich folgendes gemacht:<\/p>\n Bild mit \u00fcberlagerten Button erstellte, diesen die CSS-Klasse rv_button_1 rv_button_closed versehen. Das ganze dreimal, wobei die Button-Klasse forlaufend nummeriert wurde (also rv_button_2 rv_button_closed und rv_button_3 rv_button_closed).<\/p>\n Anzeigen wollte ich jeweils eine Zeile unterhalb diser Bilder mit Buttons. Diese drei Zeilen wurden mit den CSS-Klassen rv_element rv_element_1\u00a0 bis rv_element rv_element_3 versehen.<\/p>\n Im <head> habe ich \u00fcber Divi das folgende Coding erg\u00e4nzt (Divi > Divi Theme Optionen > Integration):<\/p>\n Im CSS des Divi Themes habe ich folgendes erg\u00e4nzt (Divi > Divi Theme Optionen > Allgemeines):<\/p>\n Et voil\u00e1.<\/p>\n Mehr zum Thema Toogle gibt es auch hier bei mir:<\/p>\n WordPress Divi: 1. Akkordeon -Element geschlossen<\/a><\/p><\/blockquote>\n<script>
jQuery(function($){
var buttons = {
'.rv_button_1': {
'toggle': '',
'hide' : '.rv_element_2,.rv_element_3',
'show' : '.rv_element_1'
},
'.rv_button_2': {
'toggle':'',
'hide' : '.rv_element_1,.rv_element_3',
'show' : '.rv_element_2'
},
'.rv_button_3': {
'toggle': '',
'hide' : '.rv_element_1,.rv_element_2',
'show' : '.rv_element_3'
}
};
$.each(buttons, function(button, elements) {
$(button).click(function(e){
e.preventDefault();
$(elements.toggle).slideToggle();
$(elements.show).slideDown();
$(elements.hide).slideUp();
$(button).toggleClass('rv_button_opened rv_button_closed');
});
});
});
<\/script><\/pre>\nbody:not(.et-fb) .rv_element { display: none; }
.et_pb_button.rv_button_opened:after { content:\"\\32\"; }
.et_pb_button.rv_button_closed:after { content:\"\\33\"; }<\/pre>\n
\n