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 make all images look same

    How to increase rotate value

    Hide all, show a class with css

    How to get smaller divs to stack to the right of larger divs?

    How to style HTML5 input type=“datetime-local” [duplicate]

    How to load up CSS files using Javascript?

    How to reveal part of blurred image where mouse is hovered?

    css: how to target p a img

    How to get a list of valid values for a CSS property with javascript?

    How can razor be used to expand CSS templates?

    How to have different input text styles in same html form?

    How to change css style of Kendo Combobox

    How to add CSS files for different platform devices? [closed]

    How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

    how to deselect the active span element?

    How to calculate rotation angle from rectangle points?

    How to add box-shadow to a CSS div with display:table-row? [duplicate]

    How to add CSS Hack specifically for IE10?

    How can I put styleName (css) on ui.xml to HTML5 input element (range)

    Django 1.7: how to send emails by using an html/css file as template

    How do I get these elements to effectively center properly and responsively?

    How do I center a background image to its parent element?

    How can I set the Eclipse JS to edit a file as CSS

    How to force text to wrap inside inline-block div?

    How to make div expand all the way to the right

    How to position div inside middle of navbar?

    CSS-3 - How can I place a white space holder above two columns?

    How to figure out the CSS bugs?

    How to set body attribute in css using angularjs?

    how to select a sibling element when hovering in CSS?