FadeToggle doesn't toggle more than one element correctly

programming web dev
1

Hello! I have a slideshow (Promo Slideshow WordPress plug-in http://wordpress.org/extend/plugins/promotion-slider/), and I’ve added an Info button to toggles the visibility of the description for each slide.

I have only one Info button and several description divs (one per slide).

I start with all descriptions set to display:none. When I click on the Info button, all the descriptions display as I advance through the slide show. Perfect.

The problem occurs when I try to close the descriptions. They should all close when I click on Info, but only the one I click on closes. The rest remain open as I go through the slideshow. If I try to close another one, it will close, but as I advance through the slide show, the first one re-opens! Looks like I can only have one description closed at a time.

Is there something wrong with my code or could there be a conflict with some other js? I would appreciate any help you can offer. Thanks!

Here is the relevant HTML:


<a href="#"  class="toggleMe">Info</a>
<div class="slider_description" style="display:none;">Description 1</div>
<div class="slider_description" style="display:none;">Description 2</div>
<div class="slider_description" style="display:none;">Description 3</div>

Here is the corresponding JQuery:


jQuery(document).ready(function($){ 
$(".toggleMe").click(function () {    $(".slider_description").fadeToggle("slow", "linear");
  });
 });