JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">

  <div class="backgroound">

    <div id="panel1" class="paneelinvartalo">vartalo

    </div>

    <div id="panel2" class="paneelinpaa">pää

    </div>

  </div>

  <div id="memberlist_links">

    <br>

    <a href="#" rel="" class="nappulat" data-panelid="panel1">A

        </a>

    <br>
    <a href="#" rel="" class="nappulat" data-panelid="panel2">B

              </a>

  </div>

</div>

CSS

#memberlist_links a {
  left: 800px;
  font-size: 70px;
  position: relative;
  left: 800px;
  padding: 0px;
  color: red;
  margin: 0px;
}
.paneelinpaa {
  border: 1px solid black;
  background-color: lightblue;
  height: 200px;
  width: 200px;
  font-size: 70px;
}
.paneelinvartalo {
  border: 1px solid black;
  background-color: lightblue;
  font-size: 70px;
  height: 200px;
  width: 200px;
}

JavaScript

/*$(function() {

  $('.nappulat').on('click', function(p) {

    p.preventDefault();

    var panelid = $(this).attr('data-panelid');

    $('#' + panelid).toggle(1).html('hello')

  });

});*/

$(function() {
        $('.nappulat').on('click', function(p) {
            p.preventDefault();
            var panelid = $(this).attr('data-panelid');
            var cssVisilibty = $('#' + panelid).css('visibility') == 'hidden' ? 'visible' : 'hidden';
            $('#' + panelid).css('visibility', cssVisilibty).html('hello');
        });
    });