Question

I’ve toggled my blog posts using jQuery. At the moment I’m able to have all posts open at the same time, but I would prefer to have all posts close when one is clicked. What do I need to add to my jQuery code to do this?

Here is my code:

<script type="text/javascript">
$(document).ready(function() {
$('.toggle-section').hide();
});
</script>

<script type="text/javascript">
$(function() {
$('.entry-title').click(function() {
$(this).closest('.post').find('.toggle-section').slideToggle();     
return false;
});
});
</script>

Answer 1

$(function() {
    $('.entry-title').click(function() {
        var clicked = this;  // take a reference of clicked element
                             // to use it within hide() callback scope

        // hide all visible sections
        $('.toggle-section:visible').hide(function() {
            // show the clicked
            $(clicked).closest('.post').find('.toggle-section').slideDown();
        });
        return false;
    });
});

You should aggregate your all code split into two parts:

<script type="text/javascript">
  $(function() {
      $('.toggle-section').hide();  // initial hide

      $('.entry-title').click(function() {
        var clicked = this;  // take a reference of clicked element
                             // to use it within hide() callback scope

        // hide all visible sections
        $('.toggle-section:visible').hide(function() {
            // show the clicked
            $(clicked).closest('.post').find('.toggle-section').slideDown();
        });
        return false;
     });
  });
</script>