add/remove Div Class

Question

Let me start by saying that I am new to all of this but trying to learn. With that said, I have been racking my brain to figure out how to get a div class to be added/removed with a button id. Any help at all would be greatly appreciated as I have about 200 of these text boxes to make. Attached is the sample html (for use in wordpress with thesis theme) and the css I am using. I have also included a link to jsfiddle so that you can see what I am trying to accomplish (but have failed at).

http://jsfiddle.net/EXPH77/rz683/

CSS:

#the_box {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 300;
  color: #oooooo;
  background-color: #ddddee;
  width: 320px;

}

.box_header {
  padding-top: .5em;
  font-weight: 600;
  color: #ffffff;
  background-color: #477ede;
  text-align: center;
  height: 25px;
  font-size:1.2em;

}

.box_text {
  text-align: left;
  padding: 1px;
  margin-bottom: 3px;
  font-size:0.84em;

}

.media {
  text-align: center;
  padding: 4px;
  margin-bottom: 3px;

}

.box_expand {
  text-align: left;
  padding: 1px;
  margin-bottom: 3px;
  font-size:0.84em;

}

p.headtext {
  color: #000000;
  font-weight: 600;
  margin-bottom: 3px;
  text-align: left;
  font-size:1.2em;

} 

HTML:

<div id="the_box">
<div class="box_header"> Exercise Title </div> 
<div class="media"> 
<iframe width="300" height="195" src="http://www.youtube.com/embed/Ok97QIq2f4E" frameborder="0" allowfullscreen></iframe> 
</div> 
<div class="box_text"> 
<p class="headtext">Muscles</p> 
<ul style="list-style: none; "> 
  <li><strong>Primary:</strong>&nbsp;&nbsp;MM</li> 
  <li><strong>Secondary:</strong>&nbsp;&nbsp;MM</li>
<button id="addClass">Instructions</button>
<script type="text/javascript">
    $("#addClass").click(function () {    
      $('#the_box').addClass('box_expand');
    $("#removeClass").click(function () {
      $('#the_box').removeClass('box_expand');
    });  
</script>
</div> <div class="box_expand"> 
<p class="headtext">Preparation</p> 
<ol> 
  <li>Instructions</li> 
  <li>Go</li> <li>Right</li> 
  <li>Here</li> 
</ol> 
<p class="headtext">Movement</p> 
<ol> 
  <li>Instructions</li> 
  <li>Go</li> 
  <li>Right</li> 
  <li>Here</li> 
</ol> 
<p class="headtext">Comments/Tips</p> 
<ul> 
  <li>Instructions</li> 
  <li>Go</li> 
  <li>Here</li> 
</ul> 
</div> 
</div>

Answer 1

First ol afll; call jQuery libary to the DOM and always use document.ready() when you need to initualise a function on jQuery.

Second thing, you forgot to close first click function with this: )};

Edit: If you want to show and hide the selector; Here is working jsFiddle.

jQuery: and if you want to this with animation, you can use fadeOut() fadeIn() methods.

$("#hide").click(function () {
    $('#the_box').fadeOut(300);
    //$('#the_box').hide();
});
$("#show").click(function () {
    $('#the_box').fadeIn(300);
    //$('#the_box').show();
}); 

html:

<div id="the_box"> The Box </div>
<button id="hide"> Hide </button>
<button id="show"> Show </button>​