Question

I am looking for the proper, simple, small code to do the following things:

• Click on Element with Class Applied to it.

• DIV.CLASS – Which expands and shows hidden content. (slideDown – Toggle)

• DIV.CLASS – Which collapses and hides the previously show content. (slideUp – Toggle)

<div class="sitesection">
    <p class="expand-one"><a href="#">Click Here To Display The Content</a> <img src="images/arrow.png" width="5" height="7" /></p>
    <p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.

I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians… But those never close, they just open another one.

Answer 1

$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});

Demo: http://jsfiddle.net/Q4PUw/2/