Help with shortcodes

Hi

I am trying to create a shortcode that will toggle content in a <div> when the link is clicked and would like some advice to get them working properly.

Here’s my html

<h2 class="my-slidetoggle"><a href="#">Toggle Title</a></h2>
<div class="toggle-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a porta nulla. Ut fermentum faucibus leo a pretium.</p></div>

Here’s my js code

jQuery(document).ready(function() { // hides the slickbox as soon as the DOM is ready
	jQuery('.toggle-content').hide(); // toggles the slickbox on clicking the noted link
	jQuery('h2.my-slidetoggle').click(function() {
	jQuery('.toggle-content').slideToggle(400); return false;
}); });

And here is what Ive put in my functions.php

function toggle_func( $atts, $content = null ) {
	extract(shortcode_atts(array(
        'title'      => '',
    ), $atts));

	$out .= '<h2 class="my-slidetoggle"><a href="#">' .$title. '</a></h2>';
	$out .= '<div class="toggle-content" style="display: none;">';
	$out .= '<div class="block">';
	$out .= do_shortcode($content);
	$out .= '</div>';
	$out .= '</div>';

   return $out;
}
add_shortcode('toggle', 'toggle_func');

The problem I have run into is when there are more than one shortcode is used in a page, they all open and close when one link is clicked.

Could someone please explain how do I get them to work individually/independently without writing a shortcode for each toggle used?

Thanks in advance

Voddie