$('.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: ''}); } });
<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>