JSFiddle - React, Tailwind, and code Playground

HTML

<div class="plantmenu" id="div1">one</div>
<div class="plantmenu" id="div2">two</div>
<div class="plantmenu" id="div3">three</div>


<div class="plants" id="div1content">one content</div>
<div class="plants" id="div2content">two content</div>
<div class="plants" id="div3content">three content</div>

CSS

div { height: 30px; width: 150px; border: 1px solid black; margin-bottom: 5px; }

div.plants { display: none; }

JavaScript

var divs = document.getElementsByClassName('plantmenu');

for (var index = 0; index < divs.length; index++) {
    divs[index].addEventListener('click', function() {
        var contentDiv = null;
        //hide all other divs
        for (var i = 0; i < divs.length; i++) {
            contentDiv = document.getElementById(divs[i].id + 'plants');
            contentDiv.style.display = 'none';
        }
        //show current item
        contentDiv = document.getElementById(this.id + 'plants');
        contentDiv.style.display = 'block';
    }, false)
}