Looking for a way to show and then hide elements using jQuery

Looking for a way to show and then hide elements using jQuery

I am looking to use jQuery to expand a hidden section of a page when an
image is clicked, and then hide it when another image is clicked. I've
already written the CSS to make the element that is supposed to be closed
hidden, and have written some jQuery from the very little I know and
learned from a book. However, I don't know where to place my code in the
HTML (I do not have access to the head section of the page I'm working on,
and I dont know what element to assign them to.
But here is my issue on this page: URL LINK
On the "complexity factors" "literature Connection" etc parts (lower right
hand side where there are cirlces with the + sign next to them, I wanted
to run this jQuery code to achieve it.
One thing I'm guessing though is that this will create an issue for me
since when the content is expanded, I'll need away to make the "+" image
become a "-" image.
The concept is to have the "+" image shown if the content is hidden
(default) and a "-" image as the background image if the content is
expanded.
Here is my jQuery:
$(document).ready(function()
{ $('div.hidden').hide();
$('div.expandingBtn').click(function()
{ $(this).next('div.hidden').slideToggle('fast');
return false; }); }); </script>
CSS:
/******EXPAND AND COLLAPSE BUTTONS******/
.mainRight h3 {
display: inline-block;}
.expandingBtn {
display: inline-block;
float: none; }
.expandingBtn.hide {
display:inline-block;
margin-left:10px;}
.expandingBtn:hover {
cursor: pointer; }
.hidden {
display: none;}
the markup:
<h3 class="colorScheme">
Complexity Factors</h3>
<div class="expandingBtn">
<a href="">
<img alt="view Complexity Factors"
src="/resource/uploads_scope/img/expandBtn.png/>
</a>
</div>
<p>
See how this text will challenge your students.</p>
<!--THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS
CLICKED-->
<div class="hidden">
<h4>
Purpose</h4>
<p class="times">
The article has a clear purpose&mdash;to inform readers
about how a brave teenager stood up to the
Taliban&mdash;as well as an implicit purpose&mdash;to show
how just getting an education is difficult for many young
people around the world.</p>
<h4>
Knowledge Demands</h4>
<p class="times">
Comprehension will be aided by knowledge of current world
events and geography. The major topics (free speech, the
Taliban, terrorism, girls&rsquo; education worldwide,
fighting oppression) will be unfamiliar to many
students.</p>
<h4>
Language Conventionality and Clarity:</h4>
<p class="times">
<strong>Vocabulary:</strong> Many higher academic
vocabulary words (e.g., oppressive, pseudonym,
unwittingly)</p>
<p class="times">
<strong>Figurative language:</strong> Includes
personification (&ldquo;fear was her constant
companion&rdquo;) and metaphor (Malala&rsquo;s voice is
likened to a weapon)</p>
<h4>
Structure</h4>
<p class="times">
A nonlinear structure that starts in 2012 then goes back
to 2007 and then forward to 2013. Includes narrative
and informational passages.</p>
</div>
<!--THIS ENDS THE FIRST HIDDEN SECTION-->