JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
    <a href="#" class="links" data-showdiv="content1" id="button1">Button 1</a>
    <a href="#" class="links" data-showdiv="content2" id="button2">Button 2</a>
    <a href="#" class="links" data-showdiv="content3" id="button3">Button 3</a>
</div>
<div id="container">
    <div class="divs" id="content1">
        Test content 1
    </div>
    <div class="divs" id="content2">
        Test content 2
    </div>
    <div class="divs" id="content3">
        Test content 3
    </div>
</div>

CSS

.divs { 
    display: none;
}

JavaScript

$(".links").click(function () {
    var $target = $("#" + $(this).data('showdiv'));
    if ($target.is(':visible')) {
        $(".divs:visible").slideToggle();
    } else {
        $target.slideDown().siblings().slideUp();
    }
});