jQuery function to only run on the element clicked
I'm trying to implement an accordian style box on some content. However
there are 4-6 of these boxes on 1 template, all with different classes for
obvious reasons. However I want to try and make the code as easy to read
as possible and I don't want to duplicate the code for each class name.
I'm assumung jQuerys (this) method would work but i'm not 100% sure how to
use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs
to be displayed after the onClick function. But currently when I click the
header all the .scollText divs appear on the page. So i want it to only
appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>
No comments:
Post a Comment