Accordion able to display all but i only need one opened at any one time

Question

First thing first. Merry Christmas.

I am using an accordion script at http://bootsnipp.com/snippets/4OlpK, which is fine so far. However, I need the collapse option when an accordion option is being clicked. At the moment, all can be open. I only need one accordion option to be opened at any one time.

Help.

Answer 1

Change you Js function like below it will work

$(function() {
  $(".expand").on( "click", function() {
  $(".expand").find(">:first-child").text("+");
  $(".detail").css("display","none");
    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

Find this fiddle.

Answer 2

Replace your javascript with this:

$(function() {
  $(".expand").on( "click", function() {
    if($(this).next().css("display")=="none"){
      $(".expand").next().css("display","none");
      $expandold = $(".expand").find(">:first-child");
      $expandold.text("+");
      $(this).next().slideToggle(200);
      $expand = $(this).find(">:first-child");
      $expand.text("-");
    } 
    else{
      $(".expand").next().css("display","none");
      $expand = $(this).find(">:first-child");
      $expand.text("+");
    }

  });
});

Here's a working codepen

Answer 3

This would be a solution using the slideUp method.

$(function() {
  $(".expand").on( "click", function() {
    $('.detail').not($(this).next()).slideUp().prev().find(">:first-child").each(function(){
      $(this).text("+");
    });

    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});