JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div id="tab1">
<button class="ro">Read Only Button </button>
<button class="edit">Edit Only Button </button>
<button class="edit">Edit Only Button  #2</button>


<div class="ro" >Div1</div>

<div class="edit">Div2</div>

<a href="#" onclick="jQuery('#tab1').find('.ro,.edit').toggle();">Toggle</a>

</div>


<div id="tab2">
<button class="ro">Read Only Button </button>
<button class="edit">Edit Only Button </button>
<button class="edit">Edit Only Button  #2</button>


<div class="ro" >Div1</div>

<div class="edit">Div2</div>

<a href="#" onclick="jQuery('#tab2').find('.ro,.edit').toggle();">Toggle</a>

</div>

CSS

.ro {
}
.edit {
 display: none;
}

#tab1, #tab2 {
margin: 10px; border: solid black 1px;
}