JSFiddle - React, Tailwind, and code Playground

by lcunning

HTML

<body>
        <div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1">Button 1</button></li>
                <li class="buttons"><button id="button2">Button 2</button></li>
                <li class="buttons"><button id="button3">Button 3</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info">

            </div>
        </div>
<div id="hiddenDivs" style="display:none;">
    <div class="info" id="option1">Box</div>
    <div class="info" id="option2">Google Drive</div>
    <div class="info" id="option3">Box</div>
</div>
</body>

CSS

#button-column {
  display: inline;
  float: left;
}
button {
    font-size: 10px;
    width: 50px;
    height: 30px;
    margin: 15px; 
}

#info {
    width: 200px;
    height: 200px;
    padding-top: 37.5px;
    border: 1px solid black;
    display: inline;
    float: left;
    text-align: center;
}

JavaScript

$(document).ready(function (){
    $('#button1').click(function (){
                $('#info').empty();
        $('#info').prepend('#option1');
    });
    $('#button2').click(function (){
                $('#info').empty();
        $('#info').prepend('#option2');
    });
    $('#button3').click(function (){
            $('#info').empty();
    $('#info').prepend('#option3');
    });
 });