How do I set jQuery accordion default to unopened? And toggle open/closed?


Tags: javascript,jquery,html,css

Problem :

So I've got a page with a ton of accordions and when the first initially loads every single accordion by default is opened until I click on one. Then all of them close but that one and it then works fine from there.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="ss_menu">
  <a class="ss_button">Accordion 1</a>
  <div class="ss_content">
    Content 1
  </div>
</div>

<div id="ss_menu">
  <a class="ss_button">Accordion 2</a>
  <div class="ss_content">
    Content 2
  </div>
</div>

<div id="ss_menu">
  <a class="ss_button">Accordion 3</a>
  <div class="ss_content">
    Content 3
  </div>
</div>

CSS

/* Accordion controls */
#ss_menu {
  border: 1px solid #ccc;
}

.ss_button { 
    cursor: pointer;
    color: black;
}

.ss_content {
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

JS

jQuery(function() {
    jQuery('.ss_button').on('click',function() {
        jQuery('.ss_content').slideUp('fast');
        jQuery(this).next('.ss_content').slideDown('fast');
    });
});

And the related Codepen: http://codepen.io/jacob_johnson/pen/zvdQGO

So my questions are:
1. How can I set them all closed by default on page load?
2. How can I toggle the one active one off by clicking the activate button again?

Any help would be appreciated.

Solution to question 1
Add display: none to my content element.



Solution :

Set display:none in the CSS to start and change the code to be smarter on what it is hiding.

jQuery('.ss_button').on('click',function() {
    var content = jQuery(this).next('.ss_content');
    jQuery('.ss_content').not(content).slideUp('fast');
    content.toggleSlide('fast');
});

    CSS Howto..

    How to set a div over a div using css?

    How to make child elements from parent1 have a higher z-index than child elements from parent 2 (with same z-index as other parent)?

    How can I move all my CSS box shadows back under div

    How to isolate specific platforms using CSS selectors in the Ionic framework

    How is better to do with CSS sprites [closed]

    How can I position a form with controls over a Google Map?

    How to set display none on tag using css?

    “Best fit” font size - how do I measure a sentence width?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • How can you align all the cells to the left with css [closed]

    How do you group similar n-th child selectors? [duplicate]

    How to apply a CSS transition only to the transform property

    Show/hide css class by url parameter with php

    how to select last-child or first-child elements just in parent? (css - html)

    how to center align IMG in div?

    how to write css to reduce font size [duplicate]

    How can I make CSS affect DOM elements generated after the CSS was interpreted?

    How to use a Drive hosted css to customize the receiver?

    How to make an element with background image appear using css animation/javascript

    how to display labels inline with inputs, using w3.css

    How do I make an inline-block stretch?

    How can I get this anchor link to look like a button

    960 CSS Framework, how to get full 960 width?

    How would you resize a image/gif in either CSS or HTML?

    CSS: How do I keep the text from wreaking havoc on the layout?

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    How to vertically center h1 and span in a li

    How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

    How to set fixed base to calculate vh unit in css on mobile?

    in slick slideshow, just want center slide to be active