$('.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' }); } else { $('.target-visibility').css({ 'visibility': 'hidden' }); } }); $('.click-opacity').click(function () { if ($('.target-opacity').css('opacity') == '0') { $('.target-opacity').css({ 'opacity': '1' }); } else { $('.target-opacity').css({ 'opacity': '0' }); } });
<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>