JQuery slideToggle function with separate close button

Question

I am having a bit of trouble getting the script to work. I dont know where i am going wrong. Any help would be appreciated please. Its learning in progress.

I have a toggle set up on my page that works fine, except that when the content div opens, i have a close button inside the open div that when clicked needs to close the content div. Here is my code:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".chairmanContent").hide();
  //toggle the componenet with class msg_body
  jQuery(".chairmanReadmore").click(function()
  {
    jQuery(this).next(".chairmanContent").slideToggle(500);
  });
});

jQuery(document).ready(function() {
  jQuery(".chairmanContent").hide();
  //toggle the componenet with class msg_body
  jQuery(".chairmanClose").click(function()
  {
    jQuery(this).next(".chairmanContent").slideUp(500);
  });
});
</script>

I am not sure if using slideUp is the correct way to solve this.

Answer 1

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.

Answer 2

I hope I understand completely, I write example code for you and dont have to use slideUp()

check it please : http://jsfiddle.net/mehmetakifalp/m9RE4/

    $(".toggleSlide").click(function(){
        $(".content").slideToggle();
    });

    $(".closeContent").click(function(){
        $(".content").slideToggle();
    });