Quick help with some jQuery toggle

Question

I have the following code:

<script>
    $(document).ready(function() {
        $('.toggle_section').click(function(e){
            parent = $(e.target).closest("div")
            objChild = parent.children('div');
            $('.sectionContentId').hide(400);
            $(objChild).toggle(400);
        });
    });

</script>

<br />
<div class="box" id="parent_section_1">
    <strong>
        <a class="toggle_section" href="javascript:;">New Section 1</a>
    </strong>
    <div class="sectionContentId" id="section_1" style="display: none">
        <br />
        Contents<br />for<br />section<br />1
    </div>
</div>

<br />

<div class="box" id="parent_section_2">
    <strong>
        <a class="toggle_section" href="javascript:;">New Section 2</a>
    </strong>

    <div class="sectionContentId" id="section_2" style="display: none">
        <br />
        Contents<br />for<br />section<br />2
    </div>
</div>

And example can be seen here

As you can see, what I'm trying to accomplish is that when you click on one of the links, all the other "already expanded sections" collapse, and the clicked section expand.

this works fine as it is, but obviously by using the logic:

$('.sectionContentId').hide(400);
$(objChild).toggle(400);

When I click one of the expanded sections in the attempt to close it, it closes briefly and opens again.

I wanna keep the same functionality, but wanna be able to open and close a section by clicking on a link, as well as when I'm opening a section, I wan't it to close everything before opening this new section.

I'm not sure I'm being very clear here, but by looking at the example, you will be able to understand better what I mean.

Thnks in advance

Answer 1

If the problem is that the element is hiding and then instantly showing, you could remove it from the elements selected for the hide... in this example all elements with a class="sectionContentId" except where the id="elemid"...

$('.sectionContentId:not(#elemid)').hide(400);

Answer 2

Try this:

$("a.toggle_section").click(function() {
  var sections = $("div.box > div");
  var current = $(this).closest("div.box").children("div");
  sections.not(current).stop().hide(400, function() {
    current.toggle(400);
  });
  return false;
});

If I understand you correctly this should do what you want, which is:

When you click on a pertinent link all sections for the other links are hidden. After they're hidden, the current one is toggled.

I'm not sure this will be such a great user experience. What if they're all already hidden? Do you still want the delay? You can code for this case of course. Also, are you sure you want to toggle the section rather than simply showing it?

Edit: to show the one you click and hide the rest at the same time:

$("a.toggle_section").click(function() {
  var sections = $("div.box > div");
  var current = $(this).closest("div.box").children("div");
  sections.not(current).stop().hide(400);
  current.show(400);
  return false;
});

Answer 3

You could try a plugin i made of my own, modify it or wathever => http://stackoverflow.com/questions/2514516/how-to-make-nested-vertical-menu-with-jquery-accordion/2514729#2514729

Answer 4

DEMO: http://jsbin.com/uguto3/3/edit

you can do it with less code by just adding the toggle class to the strong tag

<strong class="toggle_section">

like this

  $('.toggle_section').click(function() {
     $('.sectionContentId').slideUp(400);
    if($(this).next().is(':hidden')) 
      $(this).next().slideDown(400);            
   });