so instead of .next()
use .closest()
:
change this:
jQuery(this).next(".chairmanContent").slideUp(500);
to this:
jQuery(this).closest(".chairmanContent").slideUp(500);
//-----------^-----^---------use closest here.
What seems to me is that your close button "chairmanClose"
is inside this div "chairmanContent"
so in this case you have to traverse up to your div with .closest()
.
You can simplify your code this way:
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".chairmanContent").hide();
//toggle the componenet with class msg_body
$(".chairmanReadmore").click(function(){
$(this).next(".chairmanContent").slideToggle(500);
});
//toggle the componenet with class msg_body
$(".chairmanClose").click(function(){
$(this).closest(".chairmanContent").slideUp(500);
});
});
</script>
You don't need two jQuery(document).ready();
functions instead of it you can do it in a single doc ready method and you can use your $
sign as an alias for jQuery the way i suggested.