Bootstrap Accordion Menu Not Working

I have designed a accordion menu like in the image. If you click a menu the opened menu will get closed.This is the functionality of accordion. But in this design i've clicks menu

Solution 1:

Please have a look at this jQuery approach:

if (!$(this).hasClass("active")) {
     var oldAcc = $(".accordion.active");
     oldAcc.toggleClass("active");
     oldAcc.next().toggleClass("show");
}

With above code we are getting reference to already opened accordion and closing it before opening the other one.

jQuery(document).ready(function() {

  $(".accordion").click(function() {
    if (!$(this).hasClass("active")) {
      var oldAcc = $(".accordion.active");
      oldAcc.toggleClass("active");
      oldAcc.next().toggleClass("show");
    }
    $(this).toggleClass("active");
    $(this).next().toggleClass("show");


  });

});

.boot-accordian {
  padding-top: 2%;
}
.boot-accordianbutton.accordion {
  text-transform: uppercase;
  background-color: #362f29;
  color: #e96f0a;
  cursor: pointer;
  width: 100%;
  border: none;
  border-top: 1px solid #3e352c;
  border-bottom: 1px solid #3e352c;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  padding: 0.8%1%0.8%3%;
}
.boot-accordian.para {
  padding-left: 1px;
  padding-top: 2%;
  font-size: 15px;
}
.boot-accordianbutton.accordion.active,
.boot-accordianbutton.accordion:hover {
  background-color: #362f29;
}
.boot-accordianbutton.accordion:after {
  font-size: 13px;
  font-family: FontAwesome;
  content: "\f067";
  color: @color_24;
  float: right;
}
.boot-accordianbutton.accordion.active:after {
  content: "\f068";
  font-family: FontAwesome;
  font-size: 13px;
}
.boot-accordiandiv.panel {
  padding: 018px;
  display: none;
  background-color: #433a31;
}
.boot-accordiandiv.panel.show {
  display: block;
  margin: 0;
  padding-bottom: 5%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="boot-accordian"><buttonclass="accordion">listings</button><divclass="panel"><pclass="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p></div><buttonclass="accordion">contract information</button><divclass="panel"><pclass="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p></div><buttonclass="accordion">letter templates</button><divclass="panel"><pclass="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendaraccounts, iphone or Blackberry.</p></div><buttonclass="accordion">tasks and task templates</button><divclass="panel"><pclass="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p></div><buttonclass="accordion">secure file storage</button><divclass="panel"><pclass="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p></div><buttonclass="accordion">reports</button><divclass="panel"><pclass="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p></div></div>

Solution 2:

Note: first this is not bootstrap accordion

here is solution just add these 2 lines when you click

$(".accordion").removeClass("active");
$(".panel").removeClass("show");

better to write some thing like this way (Pure JQuery)

jQuery(document).ready(function() {
    $(".accordion").click(function(){
    $(".accordion").removeClass("active");
    $(".panel").removeClass("show");
    $(this).addClass("active");
    $(this).next(".panel").addClass("show");
  })
});

fiddle

Solution 3:

If you're simply wanting one to slide down while the others slide back up, use the following code:

$('.accordion').click(function() {
    var targetElement = $(this).next('.panel');
    targetElement.slideToggle();
    targetElement.siblings('.panel').slideUp();
});

example here CODEPEN

ENJOY... :)

Solution 4:

Just do it right with jQuery:

jQuery(document).ready(function () {
  $('.accordion').on('click', function() {
    var target = $(this),
      activeEl = $('.active'),
      openedEl = $('.show');

      // remove the active state
      activeEl.removeClass('active');
      openedEl.removeClass('show');
      // add active state for unactive elements onlyif(!target.is(activeEl)) {
        target.addClass('active');
        target.next().addClass('show');
      }
  });
});