JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fullpage">
    <div class="section" id="f01">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
    <div class="section" id="f02">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
    <div class="section active" id="f03">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
    <div class="section" id="f04">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
    <div class="section" id="f05">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
</div>

CSS

.trigger {
    cursor: pointer;
}
.example {
    display: none;
}
#fullpage {
    height: 100%;
    width: 100%;
    position: relative;
}

.section {
    height: 80px;
    width: 100%;
}

#f01 { background-color: red; }
#f02 { background-color: blue; }
#f03 { background-color: green; }
#f04 { background-color: yellow; }
#f05 { background-color: orange; }

JavaScript

var start_action = function(){
    //a lot of random actions, for example this one:
    $('.example').stop().fadeToggle();
}

$('span.trigger').click(start_action);

/* I want to improve the codes performance if you have got a lot of different sections with a huge amount of actions to be performed. In the best case, at first the current div fades in and then all other divs toggle (without animation). */