Estoy tratando de hacer un efecto de pestaña para mostrar y ocultar secciones Divi cuando hago clic en el botón. Encontré una solución en línea, pero solo cambia el efecto. Entonces, cuando hago clic en un botón y luego en el segundo botón, la sección del primer botón permanece activa y no se oculta. Quiero hacer un efecto de pestaña, de modo que cuando hago clic en el primer botón, la primera sección permanece activa y cuando hago clic en el segundo botón, la primera sección desaparece y aparece solo la segunda sección. Aquí está el código que estoy usando en este momento:

 <style> 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"; } .rv_element_2 { display: none; } </style> <script> jQuery(function($){ var revealButtons = { '.rv_button_1': '.rv_element_1', '.rv_button_2': '.rv_element_2' }; $.each(revealButtons, function(revealButton, revealElement, hideElement) { $(revealButton).click(function(e){ e.preventDefault(); $(revealElement).slideToggle(); $(revealButton).toggleClass('rv_button_opened rv_button_closed'); }); }); }); jQuery(function($){ $('.rv_button_1').click(); }); </script>

rv_element_1-2 son secciones que quiero mostrar/ocultar y rv_button_1-2 son botones en los que estoy haciendo clic. Actualmente, hago que la primera sección aparezca automáticamente con una función de clic en el primer botón.

Creo que hay una solución simple para esto, pero soy nuevo en JS y jQuery y es difícil para mí resolverlo por mí mismo.

Muchas gracias por tu ayuda.