ToggleClass won't work

I have some HTML that I want to "highlight" when I click on it. Pretty straightforward stuff, but i cannot for the life of me get toggleClass to work :/

Here is the HTML:

<div id="mainContent"> <div id="pageTop"> ... </div> <div id="content"> <h2>2 Special Offers</h2> <p>1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> <div id="prod1"> <img src="images/prod1-1.png" width="130" height="109" alt=""> </div> <div id="prod2"> <div id="holdingBox1" class="one"> <p>Choose from over 32 products</p> </div> </div> <div id="prod3"> <div id="holdingBox2" class="two"> <p>Choose from over 32 products</p> </div> </div> </div> <div class="flyout1"> <div id="subProd">Prod 1</div> <div id="subProd">Prod 2</div> <div id="subProd">Prod 3</div> <div id="subProd">Prod 4</div> <div id="subProd">Prod 5</div> <div id="subProd">Prod 6</div> <div id="subProd">Prod 7</div> <div id="subProd">Prod 8</div> </div> <div class="flyout2"> <div id="subProd">Prod 1</div> <div id="subProd">Prod 2</div> <div id="subProd">Prod 3</div> <div id="subProd">Prod 4</div> <div id="subProd">Prod 5</div> <div id="subProd">Prod 6</div> <div id="subProd">Prod 7</div> <div id="subProd">Prod 8</div> </div> <div id="restOfPage"> ... </div> </div> 

and here is the jQuery:

$(document).ready(function() { $('.flyout1').hide(); $("#holdingBox1").on("click",function(){ $(this).toggleClass("hover"); $(".flyout1").slideToggle(); $(".flyout2").hide(); }); $('.flyout2').hide(); $("#holdingBox2").on("click",function(){ $(this).toggleClass("hover"); $(".flyout2").slideToggle(); $(".flyout1").hide(); }); }); 

The slideToggle stuff on my hidden layers works great, adding other functions just seems to break it :/

Here is the CSS "hover" I am trying to apply

.hover { border:1px solid red; } 

Any ideas on how i have monumentally c*cked this up would be greatly appreciated, as I just can't see what I am doing wrong :/