accordion+tab = previous content does not dissapear

291
December 10, 2016, at 3:46 PM

when i click different links from different accordion elements content is displayed below previous one

$('.accordion').on('click', '.accordion-control', function(e){ 
  e.preventDefault();                    // Prevent default action of button
  $(this)                                // Get the element the user clicked on
    .next('.accordion-panel')            // Select following panel 
    .not(':animated')                    // If it is not currently animating
    .slideToggle();                      // Use slide toggle to show or hide it
});


$('.tab-list').each(function(){                   // Find lists of tabs
  var $this = $(this);                            // Store this list
  var $tab = $this.find('li.active');             // Get the active list item
  var $link = $tab.find('a');                     // Get link from active tab
  var $panel = $($link.attr('href'));             // Get active panel
  $this.on('click', '.tab-control', function(e) { // When click on a tab
    e.preventDefault();                           // Prevent link behavior
    var $link = $(this),                          // Store the current link
        id = this.hash;                           // Get href of clicked tab 
    if (id && !$link.is('.active')) {             // If not currently active
      $panel.removeClass('active');               // Make panel inactive
      $tab.removeClass('active');                 // Make tab inactive
      $panel = $(id).addClass('active');          // Make new panel active
      $tab = $link.parent().addClass('active');   // Make new tab active 
    }
  });
});

when i click different links from different accordion elements content is displayed below previous one

/**********  ACCORDION **********/
.accordion, .menu {
  background-color: #f2f2f2;
  color: #666;
  margin: 0;
  padding: 0;
  overflow: auto;}
.accordion li {
  padding: 0;
  list-style-type: none;}
.accordion-control {
  background-color: rgba(0,0,0,0);
  color: red;
  display: block;
  width: 100%;
  padding: 0.5em 0.5em 0.5em 0.7em;
  margin: 0;
}
.accordion-panel {
  display: none;
}
.accordion-panel p {
  margin: 20px;
}
.accordion-panel img {
  display: block;
  clear: left;
}

/*************** Panels ***************/
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

how do i make previous content dissapear?

      <ul class="accordion">
        <li class="active"><a class="tab-control" href="#tab-0">Misc Features</a></li>
        <li>
          <button class="accordion-control">Armory</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-1">S grade</a></li>
              <li><a class="tab-control" href="#tab-2">A grade</a></li>
              <li><a class="tab-control" href="#tab-3">B grade</a></li>
              <li><a class="tab-control" href="#tab-4">C grade</a></li>
            </ul>
          </div>
        </li>
        <li>
          <button class="accordion-control">Weaponry</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-5">Special Ability</a></li>
            </ul>
          </div>
        </li>
        <li>
          <button class="accordion-control">Jewelry</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-6">Raid Boss Jewelry</a></li>
            </ul>
          </div>
        </li>
      </ul>

        <div class="content"> <!-- Content -->
      <div class="tab-panel active" id="tab-0">misc features</div>
            <div class="tab-panel" id="tab-1">armor S</div>
            <div class="tab-panel" id="tab-2">armor A</div>
            <div class="tab-panel" id="tab-3">armor B</div>
            <div class="tab-panel" id="tab-4">armor C</div>
            <div class="tab-panel" id="tab-5">weapon SA</div>
            <div class="tab-panel" id="tab-6">RB jewelry</div>
        </div>
Answer 1

Here is how you can do this:

$('.accordion .accordion-panel').not(this).slideUp();
$(this)                                  // Get the element the user clicked on
    .next('.accordion-panel')            // Select following panel 
    .not(':animated')                    // If it is not currently animating
    .slideToggle();                      // Use slide toggle to show or hide it

Here is the demo.

Reference: jQuery: exclude $(this) from selector

Rent Charter Buses Company
READ ALSO
Are angle brackets allowed in html 5 data attribute? If so how to find it with jQuery?

Are angle brackets allowed in html 5 data attribute? If so how to find it with jQuery?

I wondered whether it is allowed to store angle brackets inside a html 5 data attributeIn my example I need to store email addresses inside this attribute

282
I got a data(token from server) on one controller, and want to use that data(token) in another controller in Angular js?

I got a data(token from server) on one controller, and want to use that data(token) in another controller in Angular js?

i am getting data from server in form of token in controller named "adminSearchCtrl" and want to use that token to another controller named "adminViewCtrl" how to do that??

282
On which jQuery versions will my code run?

On which jQuery versions will my code run?

I have a piece of jQuery code I wrote using the latest version, 21

339
reset name and the value of the combobox item

reset name and the value of the combobox item

on certain event I want to change combobox selection to be reset to it's default state, and I'm using

390