JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<span id="one" class="stuff">Title - #1</span>
<hr />
<input id="two" style="display:none;" class="stuff"type='text' placeholder='input - #2' />
<br />
<a>edit1</a>
<hr />


<span id="one" class="stuff">Title - #1a</span>
<hr />
<input id="two" style="display:none;" class="stuff"type='text' placeholder='input - #2a' />
<br />
<a>edit1a</a>

<hr />




<span id="one" class="stuff">Title - #1b</span>
<hr />
<input id="two" style="display:none;" class="stuff"type='text' placeholder='input - #2b' />
<br />
<a>edit1b</a>


<hr />

<hr /><hr />






<p>IF #2 displayed -> #1 hidden
    <br />else if #2 hidden #1 displayed</p>

<button id="click">toggle<button>

JavaScript

$(document).ready(function () {
    
    $('#click').live('click', function(){
        $('.stuff').toggle();
        init();
    });
});


function init() {
    if ($('#two').is(':visible')) {
        $('#one').hide();
    } else if (!$('#two').is(':visible')){
         $('#one').show();
    }
}