0

I'm creating a multi-tabbed accordion using jQuery. The "Headline 1" panel works fine but on "Headline 2" the panel runs the SlideDown() method twice. Another small problem I noticed is there being some delay in between when I click on a button/link and when the panel slides down.

You can take a look at the jsfiddle here to test and see the problem:

http://jsfiddle.net/3VzTj/1/

jQuery:

$(document).ready(function() {
  var class_link, class_div, content_div;
  var all_panels = $('article > div.row').not(':first-child');

  $(all_panels).hide();

  $('div.buttons a').click(function() {
    class_link = $(this).attr('class');
    class_div = class_link.match(/[^-]+$/);
    content_div = $(this).closest('article').find('div.' + class_div).parent();

    if ($(content_div).is(':visible')) {
      $(all_panels).slideUp();
    } else {
      $(all_panels).slideUp(function() {
        $(content_div).hide().slideDown();
      });
    }

    return false;
  });
});

HTML:

<section class="grid-container">
  <article>
    <div class="row clearfix">
      <div class="column half">
        <h2>Headline 1</h2>
      </div>
      <div class="column opposite half buttons">
        <a class="button-content1" href="#">Content 1</a>
        <a class="button-content2" href="#">Content 2</a>
      </div>
    </div>

    <div class="row clearfix">
      <div class="column full content1">
        <h1>Content 1</h1>
      </div>
    </div>

    <div class="row clearfix">
      <div class="column full content2">
        <h1>Content 2</h1>
      </div>
    </div>
  </article>


  <article>
    <div class="row clearfix">
      <div class="column half">
        <h2>Headline 2</h2>
      </div>
      <div class="column opposite half buttons">
        <a class="button-content1" href="#">Content 1</a>
        <a class="button-content2" href="#">Content 2</a>
      </div>
    </div>

    <div class="row clearfix">
      <div class="column full content1">
        <h1>Content 1</h1>
      </div>
    </div>

    <div class="row clearfix">
      <div class="column full content2">
        <h1>Content 2</h1>
      </div>
    </div>
  </article>
</section>
martynas
  • 12,120
  • 3
  • 55
  • 60
user1307016
  • 383
  • 1
  • 8
  • 17
  • 1
    the callback to slideup will happen once for each element that is selected. This is likely the cause of the double call and the delay. – Kevin B May 04 '14 at 03:28
  • @KevinB Thanks a lot, using promise and deferred objects worked. .promise().done(function(){}); – user1307016 May 04 '14 at 04:09

1 Answers1

1
// replace
$(all_panels).slideUp(function() {
  $(content_div).hide().slideDown();
});

//with
$(all_panels).slideUp().promise().done(function() {
  $(content_div).hide().slideDown();
});
Tanatos
  • 1,857
  • 1
  • 13
  • 12
  • Could you explain how that will fix the problem, please? – Ry- May 04 '14 at 05:21
  • Well, since you were sliding up multiple elements (ie all_panels), promise.done makes sure that all the sliding up is done before actually sliding down the element you want. – Tanatos May 04 '14 at 08:15
  • @user1307016: What I meant by “explain” was “explain in your answer”, because if an answer needs a comment from another user to be complete, it is, of course, not a complete answer. *I* know how it works already, and apparently must have read his link, since I closed your question as a duplicate of it. And if I might offer some advice back: don’t accuse people of being lazy. It’s rude. – Ry- May 04 '14 at 20:24