Wednesday, 28 August 2013

jQuery function to only run on the element clicked

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