JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<div class="wrap-key">
    <button class="toggle-keyboard">element1</button> <div class="kbrd">span1</div> <br>
</div>

<div class="wrap-key">
<button class="toggle-keyboard">element2</button>  <div class="kbrd">span2</div><br>
</div>
    
<div class="wrap-key">
<button class="toggle-keyboard">element3</button>  <div class="kbrd">span3</div><br>
</div>

CSS

.keyboard {
  display:block;
  background:green;
  color:#fff
}

JavaScript

$('.kbrd').hide();

$('.toggle-keyboard').click(function(e){
    
    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('.kbrd');
    $(".kbrd").not($this).hide();
    
    // here is what I want to do
    $this.toggle();
    
});