JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div id="buttons">
    <div>
        <h2>Title</h2>
        <div class="button active" adr="#button1"></div>
    </div>
    <div>
        <h2>Title</h2>
        <div class="button" adr="#button2"></div>
    </div>
    <div>
        <h2>Title</h2>
        <div class="button" adr="#button3"></div>
    </div>
    <div>
        <h2>Title</h2>
        <div class="button" adr="#button4"></div>
    </div>
    <div>
        <h2>Title</h2>
        <div class="button" adr="#button5"></div>
    </div>
</div>


<div id="b-text">
    
    <div id="button1">
        <p>text of button 1</p>
    </div>
    
    <div id="button2">
        <p>text of button 2</p>
    </div>
    
    <div id="button3">
        <p>text of button 3</p>
    </div>
    
    <div id="button4">
        <p>text of button 4</p>
    </div>
    
    <div id="button5">
        <p>text of button 5</p>
    </div>
    
</div>

CSS

.button {
    width: 170px;
    height: 50px;
    background-image: url('https://www.pinnaclecart.com/wp-content/themes/Pinnacle/images/proservices/example-buttons.jpg');
    background-position: -10px -80px;
    cursor: pointer;
}

.button.active {
    background-image: url('https://www.pinnaclecart.com/wp-content/themes/Pinnacle/images/proservices/example-buttons.jpg');
    background-position: -200px -80px;
}

JavaScript

$(".button").click(function(e) {
    var id = $(this).attr('adr');
    
    $('.button').removeClass('active');
    $(this).addClass('active');
    
    $("#b-text div:visible").not(id).fadeOut(50, function(){
        $(id).fadeIn();
    });
    e.preventDefault();
});
$("#b-text div:not(#button1)").hide();