Neben der Möglichkeit mit einem so genannte Umschalter oder Akkordeon (Toogle) Inhalte ein- und auszublenden, gibt es mit ein bisschen Coding auch die Möglichkeit, ganze Zeilen oder Module ein- und auszublenden.
Sehr schön erklärt wird das auf dieser Webseite: https://divibooster.com/reveal-a-divi-module-or-row-section-when-button-clicked/comment-page-4/
In meinem Fall habe ich folgendes gemacht:
Bild mit überlagerten 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).
Anzeigen wollte ich jeweils eine Zeile unterhalb diser Bilder mit Buttons. Diese drei Zeilen wurden mit den CSS-Klassen rv_element rv_element_1 bis rv_element rv_element_3 versehen.
Im <head> habe ich über Divi das folgende Coding ergänzt (Divi > Divi Theme Optionen > Integration):
<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>
Im CSS des Divi Themes habe ich folgendes ergänzt (Divi > Divi Theme Optionen > Allgemeines):
body: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"; }
Et voilá.
Mehr zum Thema Toogle gibt es auch hier bei mir:
Oder hier:
2 Ways to Create Custom Show More Toggles in Divi (elegantthemes.com)