Flexslider captions and jquery hide/show

Question

I am trying to display content on click of a Flexslider slide title. Obviously there are many slides and each has its own title and description. I have the first show/hide toggle working properly. The others will not do anything.

$('a.toggle').bind('tapone',function(e){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
$('#capinfo').slideUp({duration: 300, easing: "easeOutQuad"});
 } else {
     $(this).addClass('active');
     $('#capinfo').slideDown({duration: 300, easing: "easeOutQuad"});
   }
});

Here are the Flexslider list-items:

<li>
  <div class="flex-caption">
    <a class="toggle">
        <h3 class="caps">A Project Title</h3>
    </a>
    <div id="capinfo" class="caption-content">
       <p>Captions and cupcakes. Winning combination.</p>
    </div>

    </div>
    <img src="img/1994.jpg"/> 
</li>

Answer 1

You might want to target the class .caption-content instead:

$('a.toggle').bind('tapone',function(e){
    if($(this).hasClass('active')){
         $(this).removeClass('active');
         $('.caption-content').slideUp({duration: 300, easing: "easeOutQuad"});
    } else {
         $(this).addClass('active');
         $('.caption-content').slideDown({duration: 300, easing: "easeOutQuad"});
    }
});