I am trying to do a tab effect to show and hide Divi sections when I click on the button. I found one solution online, but it does only toggle effect. So when I click on one button and then on the second button, the section from the first button stays active and doesn't hide. I want to do a tab effect, so when I click on the first button, first section stays active and when I click on second button, first section disappear and appears only second section. Here is the code that I am using right now:

<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 are sections that I want to show/hide and rv_button_1-2 are buttons I am clicking. Currently, I make the first section appear automatically with a click function on the first button.

I believe there is some simple solution for this, but I am new to JS and jQuery and it is difficult for me to figure it out by myself.

Thanks a lot for your help.