I have several flexsliders on my portfolio page, each sliding through my different projects.
When you hover or click on the .flexslider I have the class .captions sliding up.
How do I make it so that when you hover over that current .flexslider just that flexslider has the .captions sliding up. Right now if you hover over one .flexslider, the .captions on all of the flexsliders slide up. Which makes sense, I'm just not sure how to say, just for THIS class. It doesn't work but in my head I imagine it's something like:
$("this").find(".caption" ).slideToggle( "1000", "linear" );
Here's what I currently have:
var hoverOrClick = function () {
$(".caption" ).slideToggle( "1000", "linear" );
}
$('.overlay').click(hoverOrClick).hover(hoverOrClick);
Thanks!
EDIT: .overlay is the same as .flexslider
EDIT 2: Relevant HTML
<div class="flexslider">
<div class="overlay"></div>
<div class="caption">Hey yo this is a caption.</div>
<ul class="slides">
<li><img src="images/wrightspread.jpg" alt="Science Museum Brochure"></li>
<li><img src="images/wrightspread2.jpg" alt="Science Museum Brochure"></li>
<li><img src="images/wrightspread3.jpg" alt="Science Museum Brochure"></li>
</ul>
</div>