Hide/show content

Without using display:none or visibility:hidden

by Amy L

HTML

<a href="#" class="trigger">this is my link</a>
<div class="content hidden">here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content here is my content </div>

CSS

.hidden {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

JavaScript

var $content = $('.content');
$('.trigger').click(function(e) {
    if ($content.hasClass('hidden')) {
        $content.removeClass('hidden');
    } else {
        $content.addClass('hidden');
    }
});