JSFiddle - React, Tailwind, and code Playground

by Ahmad SM

HTML

<div class="wrap-js-action"><span class="click js-action">click to show or hide (display:block|none;)</span></div>
<div class="target">target</div>

<div class="wrap-js-action"><span class="click-toggle js-action">click to show or hide by toggle (display:block|none;)</span></div>
<div class="target-toggle">target-toggle</div>

<div class="wrap-js-action"><span class="click-visibility js-action">click to show or hide (visibility:hidden|visible)</span></div>
<div class="target-visibility">target visibility</div>

<div class="wrap-js-action"><span class="click-opacity js-action">click to show or hide (opacity:0|1)</span></div>
<div class="target-opacity">target opacity</div>

<div>last line</div>

CSS

.js-action {
    cursor: pointer;
    border-bottom:1px dashed #555;
}

.wrap-js-action {
    margin:15px 0 0 0;
}

JavaScript

$('.click').click(function() {
    if ($('.target').is(':hidden')) {
        $('.target').show();
    } else {
        $('.target').hide();
    }
});


$('.click-toggle').click(function() {
    $('.target-toggle').toggle();
});

$('.click-visibility').click(function() {
    if ($('.target-visibility').css('visibility') == 'hidden'){
        $('.target-visibility').css({'visibility': 'visible', display: ''});
    }else{
        $('.target-visibility').css({'visibility': 'hidden', display: ''});
    }
});

$('.click-opacity').click(function() {
    if ($('.target-opacity').css('opacity') == '0'){
        $('.target-opacity').css({'opacity': '1', display: ''});
    }else{
        $('.target-opacity').css({'opacity': '0', display: ''});
    }
});