Jquery - using "this" to dynamically show and hide

Jquery - using "this" to dynamically show and hide

<div class="show_hide panel-header" rel="#panel">
<h4>Disclaimer</h4>
</div>
<div id="panel" class="panel">
<p>Lorem ipsum</p>
</div>
Above is my HTML ... a simple div for the header (event handler) and the
hidden div to show/hide. Works perfectly for a simple show/hide, but I may
have several panels on screen at once and I don't want to explicitly ID
each one and give it it's own function. How can I use the "this" selector
to achieve dynamic interactions?
My JQuery currently...
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$(".show_hide").show(); //Probably don't need this line...
$('.show_hide').click(function(){
$(this).children("div").slideToggle();
});
});
</script>
Any help is appreciated. I'm new to JS/JQuery and having some trouble
understanding the different selectors. Thanks!