CODEWITHSUNDEEP
zurb-foundation
thesowismine
thesowismine

Reputation: 930

Remove accordion slide animation on page load

When my page loads the active accordion item slides open which causes the other elements on the page to also move for a second.

I'd like the active accordion item to render "already opened", but still retain the animation for when a user clicks on another accordion item, or even the originally opened item in cases where the user selects another item and then the original.

I cant find any css being used to do this, so maybe its something in the javascript? If so, how would I go about overriding this.

Any suggestions on how to accomplish this would be greatly appreciated!

Foundation Accordion: http://foundation.zurb.com/sites/docs/accordion.html

Upvotes: 1

Views: 819

Answers (3)

Manuel
Manuel

Reputation: 443

CSS only (without losing the animation)

To always open the first item immediately while still keeping the animation, you can use the following code.

.accordion-item:first-of-type .accordion-content {
    display: block;
}

The first item should still have the .is-active class to be consistent, but this removes the initial animation because we overwrite the display value from none to block. The JS still overwrites this state when another accordion item is clicked, resulting in the animation we want to keep.

Upvotes: 0

ivannoel
ivannoel

Reputation: 13

CSS Solution

If using the default helper class .is-active on initial load then some plain css can eliminate the slide open animation. 

.is-active .accordion-content {
  display: block;
}

https://jsfiddle.net/r6jvbohu/

Upvotes: 1

Yass
Yass

Reputation: 2668

There's no simple solution from what I know, but you can override some attributes on load so that the active item is displayed by default. You'd have to begin with an accordion none of the items are active i.e. none of the accordion items have a class of .is-active:

Html:

<ul class="accordion" data-accordion data-allow-all-closed='true'>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 3</a>
    <div class="accordion-content" data-tab-content>
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

jQuery:

//Initialise the Foundation plugins
$(document).foundation();

function activateWithoutAnimation(itemIndex) {
  //Get the accordion item according to its index (0 based)
  var $accordionItem = $('.accordion-title:eq(' + itemIndex + ')');
  //Set the aria attributes of the accordion item you want to appear
  $accordionItem.attr('aria-expanded', 'true');
  $accordionItem.attr('aria-selected', 'true');
  //Set the attributes of the content.
  $accordionItem.next().attr('aria-hidden', 'false');
  $accordionItem.next().css('display', 'block');
  //This is essential as it lets foundation know that the item is active (to re-allow toggling)
  $accordionItem.trigger('click');
}

//Call the function.
activateWithoutAnimation(0);

There might be a better way to do the above, but from what I've read, there's no option that allows the animation to be disabled. I've tried overriding the defaults that Foundation provides to no avail.

Fiddle Demo

Upvotes: 2

Related Questions