Jquery Accordion choosing correct selector - jquery-selectors

Question

I'm struggling with plugging in the correct selector into jquery. When I plug in ".accordionButton" the entire div is clickable and the functionality works great. However, I want to make only the "h3.toggle a" clickable, but plugging that selector in doesn't work. Is there something else in the jquery I need to change here? Any advice is greatly appreciated. Thanks!
The HTML:
<div class="accordionButton">
<div class="case-top">
<div class="case-left"></div>
<div class="case-right">
<h3 class="toggle">Our Strategy and Results</h3>
</div>
</div><!--end case-top-->
</div><!--end button-->
<div class="accordionContent">sliding content here</div>
The JQUERY:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton h3.toggle a').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});

Answer 1

You are using
$(this)
but you change the selector, you need to change all $(this) selectors to
$('.accordionButton')
FIDDLE

Answer 2

Ok, here is where I'm at... the buttons are now working correctly, but on click all the instances of .accordionContent open, not just next one. ( FYI, I removed the mouseover from this code snipped)
Jquery
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.accordionButton').next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON (correct)
$(this).addClass('on');
//OPEN THE SLIDE
$('.accordionButton').next().slideDown('normal');
}
});
I'm guessing the lines:
$('.accordionButton').next().slideDown('normal');
and
if($('.accordionButton').next().is(':hidden') == true) {
are the lines which need editing. I need these two lines to open and close just the "next" .accordionContent instances not all of the instances together.