When we open one accordion other one should close

Question

I have to close the accordion when another one is open.I have to display only one accordion to open at a time. Currently, the accordion allows you to have multiple panels open at one time. If I open one tab, and then open another tab, both tabs will be open at the same time. I have to display only one. Would you help me in this?

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

 #integration-list { font-family: 'Open Sans', sans-serif; width: 100%; margin: 0 auto; display: table; } #integration-list ul { padding: 0; margin: 20px 0; color: #555; } #integration-list ul > li { list-style: none; /* border-top: 1px solid #ddd;*/ display: block; padding: 15px; overflow: hidden; } #integration-list ul > li > a:hover { text-decoration: none; } .expand { display: block; text-decoration: none; color: #555; cursor: pointer; } .expand h2{ font-size: 28px; } #sup{ display: table-cell; vertical-align: middle; width: 80%; } .detail { margin: 0 34px; display: none; line-height: 22px; /*height: 150px;*/ } .detail h2{ font-size: 18px; color: #000; } .right-arrow { /* margin-top: 12px;*/ margin:0 20px; width: 10px; height: 100%; float: left; font-weight: bold; font-size: 20px; } .icon { height: 75px; width: 75px; float: left; margin: 0 15px 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div id="integration-list"> <ul> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> </ul> </div> </div> </div> 

Answer 1

Just hide all .details first and set the text of all .right-arrow to "+".

EDIT:

As the comment suggested, I switched to slideUp for better visuals

 $(function() { $(".expand").on( "click", function() { if ($(this).find(".right-arrow").text() === "-") { return; } $(".detail").slideUp(); $(".right-arrow").text("+"); $(this).next().slideToggle(200); $expand = $(this).find(">:first-child"); if($expand.text() == "+") { $expand.text("-"); } else { $expand.text("+"); } }); }); 

 #integration-list { font-family: 'Open Sans', sans-serif; width: 100%; margin: 0 auto; display: table; } #integration-list ul { padding: 0; margin: 20px 0; color: #555; } #integration-list ul > li { list-style: none; /* border-top: 1px solid #ddd;*/ display: block; padding: 15px; overflow: hidden; } #integration-list ul > li > a:hover { text-decoration: none; } .expand { display: block; text-decoration: none; color: #555; cursor: pointer; } .expand h2{ font-size: 28px; } #sup{ display: table-cell; vertical-align: middle; width: 80%; } .detail { margin: 0 34px; display: none; line-height: 22px; /*height: 150px;*/ } .detail h2{ font-size: 18px; color: #000; } .right-arrow { /* margin-top: 12px;*/ margin:0 20px; width: 10px; height: 100%; float: left; font-weight: bold; font-size: 20px; } .icon { height: 75px; width: 75px; float: left; margin: 0 15px 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div id="integration-list"> <ul> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> </ul> </div> </div> </div> 

Answer 2

Please see below code. +(collapse) and -(expand) working properly.

$(function() {
  $(".expand").on( "click", function() {
    $(".detail").hide();
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $(this).next().slideToggle(200);
      $(".expand").find(">:first-child").text("+");
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

Answer 3

Using simple .not() you can achieve this. When one accordion is opened the other needs to slideUp() and also the sign of other needs to be '+'

Below is the working code:

 $(function() { $(".expand").on( "click", function() { var x = $(this).next(); $('.detail').not(x).slideUp(); $(this).next().slideToggle(200); $expand = $(this).find(">:first-child"); if($expand.text() == "+") { $expand.text("-"); $('.right-arrow').not($expand).text("+"); } else { $expand.text("+"); } }); }); 

 #integration-list { font-family: 'Open Sans', sans-serif; width: 100%; margin: 0 auto; display: table; } #integration-list ul { padding: 0; margin: 20px 0; color: #555; } #integration-list ul > li { list-style: none; /* border-top: 1px solid #ddd;*/ display: block; padding: 15px; overflow: hidden; } #integration-list ul > li > a:hover { text-decoration: none; } .expand { display: block; text-decoration: none; color: #555; cursor: pointer; } .expand h2{ font-size: 28px; } #sup{ display: table-cell; vertical-align: middle; width: 80%; } .detail { margin: 0 34px; display: none; line-height: 22px; /*height: 150px;*/ } .detail h2{ font-size: 18px; color: #000; } .right-arrow { /* margin-top: 12px;*/ margin:0 20px; width: 10px; height: 100%; float: left; font-weight: bold; font-size: 20px; } .icon { height: 75px; width: 75px; float: left; margin: 0 15px 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div id="integration-list"> <ul> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> <li> <a class="expand"> <div class="right-arrow">+</div> <h2>Lorem ipsum dolor sit amet</h2> </a> <div class="detail"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi. </p> </div> </li> </ul> </div> </div> </div> 

Answer 4

  $("#accordion > li > span").click(function() { $(this).closest('li').siblings().find('span').removeClass('active').next('div').slideUp(250); $(this).toggleClass("active").next('div').slideToggle(250); }); 

 #accordion { list-style: none; padding: 2px; } #accordion > li { display: block; list-style: none; } #accordion > li > span { display: block; color: #fff; margin: 4px 0; padding: 6px; background: url(images/expand_arrow.png) no-repeat 99.5% 6px #525252; background-size: 20px; font-weight: normal; cursor: pointer; font-size:16px } #accordion > li > div { list-style: none; padding: 6px; display: none; overflow:auto } #accordion > ul li { font-weight: normal; cursor: auto; padding: 0 0 0 7px; } #accordion a { text-decoration: none; } #accordion li > span:hover { } #accordion li > span.active { background: url(images/collapse-arrow.png) no-repeat 99.5% 6px #000; background-size: 20px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="accordion"> <li><span>Tab 1</span> <div> tab1 </div> </li> <li><span>Tab 2</span> <div> Tab 3 </div> </li> <li><span>tab 3</span> <div> tab 3 </div> </li> <li><span>tab 4</span> <div> Tab 4 </div> </li> </ul> 

the is another way to achive it but @Anurag Daolagajao already make corrections into your code