We Keep Coding

Change text color of a span with Javascript while hovering on seperated div

I have a menupoint and underneath it a seperate div / mega menu. I triggered the mega menu to show up via Javascript. When I am hovering over the mega menu, the desired span in the menu should get highlighted with another color and also the background color should change. You can see in the code how I tried to solve it (comments included). Can you please help me. I don´t know why I can´t trigger it via .getElementsByClassName!?
//Showing mega menu on hover over menu point
document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver);
document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("mega-menu").style.display = "block";
}
function mouseOut() {
document.getElementById("mega-menu").style.display = "none";
}
//Let mega menu stay visible when hovering over it
//Style menupoint when hovering over mega menu div (NOT WORKING)!
document.getElementById("mega-menu").addEventListener("mouseover", mouseOver);
document.getElementById("mega-menu").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("mega-menu").style.display = "block";
document.getElementsByClassName (".aux-menu-label").style.color = "yellow";
}
function mouseOut() {
document.getElementById("mega-menu").style.display = "none";
document.getElementsByClassName (".aux-menu-label").style.color = "";
}
.menu-item-136 {
background-color: grey;
height: 50px;
}
.menu-item-136:hover {
background-color:green;
}
.aux-menu-label {
color:blue;
}
.mega-menu-1 {
display: none;
background-color: green;
height: 200px;
}
<div>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
<a href="#" class="aux-item-content">
<span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i> Leistungen</span>
<span class="aux-submenu-indicator"></span></a>
</div>
<div id="mega-menu" class="mega-menu-1">content</div>
Thanks for your help!

Your code is a bit messy but you are calling your class incorrectly:
This:
document.getElementsByClassName (".aux-menu-label")
Should be this:
document.getElementsByClassName ("aux-menu-label")
Additionally, when using getElementsByClassName you are provided with an array-like object with all elements that have the class you have specified.
With that in mind, you must run a loop to target elements with the styles you want to apply.
The below code is how we will target multiple labels and change them to yellow on hover:
var labels = document.getElementsByClassName("aux-menu-label");
for (var i = 0; i < labels.length; i++) {
labels[i].style.color = "yellow"
}
When you run the snippet below you will see I have used similar code to revert the color back to blue onmouseout.
Learn more about getElementsByClassName here.
//Including this to show you how to target CSS child elements as described in your comment
var childElement = document.querySelector('#menu-item-136 .aux-item-content');
childElement.style.backgroundColor = "white";
console.log(childElement);
//Showing mega menu on hover over menu point
document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver);
document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("mega-menu").style.display = "block";
}
function mouseOut() {
document.getElementById("mega-menu").style.display = "none";
}
//Let mega menu stay visible when hovering over it
//Style menupoint when hovering over mega menu div (NOT WORKING)!
document.getElementById("mega-menu").addEventListener("mouseover", mouseOver);
document.getElementById("mega-menu").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("mega-menu").style.display = "block";
var labels = document.getElementsByClassName("aux-menu-label");
for (var i = 0; i < labels.length; i++) {
labels[0].style.color = "yellow"
}
}
function mouseOut() {
document.getElementById("mega-menu").style.display = "none";
var labels = document.getElementsByClassName("aux-menu-label");
for (var i = 0; i < labels.length; i++) {
labels[i].style.color = "blue"
}
}
.menu-item-136 {
background-color: grey;
height: 50px;
}
.menu-item-136:hover {
background-color: green;
}
.aux-menu-label {
color: blue;
}
.mega-menu-1 {
display: none;
background-color: green;
height: 200px;
}
<div>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
<a href="#" class="aux-item-content">
<span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i> Leistungen</span>
<span class="aux-submenu-indicator"></span></a>
</div>
<div id="mega-menu" class="mega-menu-1">content</div>
<div>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
<a href="#" class="aux-item-content">
<span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i> Leistungen</span>
<span class="aux-submenu-indicator"></span></a>
</div>
<div id="mega-menu" class="mega-menu-1">content</div>
EDIT: I've included the following javascript to show you how to target child elements and apply CSS to them. The code below will target the child of #menu-item-136 and change its background color to white. Run the snippet to see.
var childElement = document.querySelector('#menu-item-136 .aux-item-content');
childElement.style.backgroundColor = "white";
console.log(childElement);

In your code
If we add some margin to megamenu wrapper This will be not working
and menu close when pointer out from menu item.
I have fixed that isseue
Its Looks like with WordPress menu. Please check below example and its will be helpful to use multiple mega-menues You need to map megamenu data id with menu class item.
codepen example
[].forEach.call(document.querySelectorAll('nav > ul > li'), function (link) {
link.addEventListener('mouseover', coloringHandler);
link.addEventListener('mouseout', decoloringHandler);
});
[].forEach.call(document.querySelectorAll('.megamenu'), function (menu) {
menu.addEventListener('mouseover', megamenuHover );
});
var state = false;
function coloringHandler(){
state = false;
hideAllMegamenu();
// add class to current hover element
this.classList.add('active');
var Classes = this.classList; // getting all class list
Classes.forEach(name => {
var megaMenu = document.querySelectorAll('[data-id="'+name+'"]'); // check if have any mached elements with class name
if(megaMenu.length == 1 ){
megaMenu[0].classList.add('active');
state = true;
megaMenu[0].addEventListener('mouseover', megamenuHover );
megaMenu[0].addEventListener('mouseout', megamenuHoverOut );
return;
}
});
}
function decoloringHandler(){
if( state == false ){
this.classList.remove('active');
hideAllMegamenu();
}
}
function hideAllMegamenu(){
// change elemets as you want
[].forEach.call(document.querySelectorAll('nav > ul > li'), function (li) {
li.classList.remove("active");
});
// .megamenu is common class
[].forEach.call(document.querySelectorAll('.megamenu'), function (menues) {
menues.classList.remove('active');
})
}
function megamenuHover() {
this.classList.add('in-hover');
}
function megamenuHoverOut() {
hideAllMegamenu();
}
nav ul{
display:flex;
list-style:none;
}
li{
margin:0px 10px;
}
a{
background:green;
display:block;
color:white;
padding:10px 20px;
}
ul li.active a{
background:red;
}
.megamenu{
background: red;
height:200px;
pointer-events: none;
opacity:0;
position:absolute;
width:100%;
padding:20px;
color:#fff;
transition:all .5s ease;
transform:translateY(50px);
}
.megamenu.active{
opacity:1;
pointer-events: all;
transform:translateY(0px);
}
<h1>Hover over the menu Items</h1>
<nav>
<ul>
<li class="menu-item-136">
<span>Home</span>
</li>
<li class="menu-item-137">
<span>Contact us</span>
</li>
<li class="menu-item-138">
<span>Danushka</span>
</li>
<li class="menu-item-139">
<span>About us</span>
</li>
</ul>
</nav>
<div class="megamenu" data-id="menu-item-137">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="megamenu" data-id="menu-item-138">
Danushka Megamenu... Add data id for mapping
</div>

Adding class names on hover based on conditions

I've created a tabbed module which works by getting content that is in the .content div (which is hidden) and displaying it in a empty div called .overview.
The idea behind this tabbed module is that, on hover (or when class active exists), the content on the right will change based on what header is being selected from the left. I.e. If I hover over a header named "Red", the .overview div on the right will spit out "red".
However, the issues I'm having are the following:
In the demo below, don't hover on any of the headers. The .overview div has no content - which is obviously not ideal. If .tabs has class .active, then I want its content displayed on the right. I have a counter running which changes class active every 5 seconds. I don't only want to show stuff on hover.
Having said the above, if I hover over another tabs div, I want the counter to stop - to prevent it from adding class active to another .tabs div (because the hovered on tabs is active.
Demo:
$(document).ready(function() {
// add class .active on li hover
$('.tabs').mouseenter(function() {
//$('.tabs').removeClass('active');
$(this).parents('.tabs').addClass('active');
});
// Change active tab every x seconds
$(function() {
var list = $(".tabs"),
currentActive = 0;
time = 5; // interval in seconds
setInterval(function() {
currentActive = (currentActive + 1) % list.length;
list.removeClass('active').eq(currentActive).addClass('active');
}, time * 1000);
});
})
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
// when class .active exists, change content in .overview
if ($('.tabs').hasClass('active')) {
overview.html(thisContent);
}
// on hover, change content in .overview
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
})
.on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs.active {
background: none yellow;
}
.list {
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
flex-basis: 60%;
border: 1px solid blue;
}
.content {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content">
<p>Content 2</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 3</span></div>
<div class="content">
<p>Content 3</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
Edit:
I've managed to make some movement on issue 1. I've added:
if ($('.tabs').hasClass('active')) {
overview.html(thisContent);
}
Which now, without hover, displays content in .overview, however, the content doesn't change when another tab is .active (i.e. in the demo, don't hover over anything, wait and it just shows content 3 for all headers.

I would do the following (I have commented what I have changed)
$(document).ready(function() {
var list = $(".tabs"),
overview = $('.overview'),
autoInterval, // interval var
currentActive = 0; // make this global to this closure
overview.html(list.eq(0).find('.content').html()); // set overview content
startInterval(); // start interval straight away
// add class .active on li hover
list.mouseenter(function() {
var thisTab = $(this);
currentActive = list.index(this); // set current active
list.removeClass('active'); // remove active class
thisTab.addClass('active'); // add active class
clearInterval(autoInterval); // clear the interval whilst hovering
var thisContent = thisTab.find('.content').html(); // get content
overview.html(thisContent); // set overview content
});
list.mouseleave(function() {
startInterval(); // restart the interval on mouseleave
});
function startInterval() {
// Change active tab every x seconds
time = 5; // interval in seconds
autoInterval = setInterval(function() {
currentActive = (currentActive + 1) % list.length;
list.removeClass('active');
var currentTab = list.eq(currentActive);
currentTab.addClass('active');
overview.html(currentTab.find('.content').html()); // set overview content
}, time * 1000);
}
});
.tabs.active {
background: none yellow;
}
.list {
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
flex-basis: 60%;
border: 1px solid blue;
}
.content {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content">
<p>Content 2</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 3</span></div>
<div class="content">
<p>Content 3</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>

As soon as you add the mouseenter event, you need to stop the interval, you have the method clearInterval to do so.

Dropdown Menu Closes On Hover (Error)

Whhenever I hover over the menu it works fine. But, when I try to get to the submenu links and children, the menu closes
/*----------------------------------------------------
/* Dropdown menu
/* ------------------------------------------------- */
jQuery(document).ready(function($) {
function mtsDropdownMenu() {
var wWidth = $(window).width();
if (wWidth > 865) {
$('#navigation ul.sub-menu, #navigation ul.children').hide();
var timer;
var delay = 100;
$('#navigation li').hover(
function() {
var $this = $(this);
timer = setTimeout(function() {
$this.children('ul.sub-menu, ul.children').slideDown('fast');
}, delay);
},
function() {
$(this).children('ul.sub-menu, ul.children').hide();
clearTimeout(timer);
}
);
} else {
$('#navigation li').unbind('hover');
$('#navigation li.active > ul.sub-menu, #navigation li.active > ul.children').show();
}
}
mtsDropdownMenu();
$(window).resize(function() {
mtsDropdownMenu();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-513" class="menu-item "><i class="fa fa-calculator"></i> OFFERTE AANVRAGEN
<ul class="sub-menu">
<li id="menu-item-1146" class="menu-item">Zonnepanelen installatie (België)
</li>
<li id="menu-item-1144" class="menu-item">Zonnepanelen reinigen (België)
</li>
<li id="menu-item-1145" class="menu-item">Zonnepanelen installatie (Nederland)
</li>
</ul>
</li>

The code you posted works just fine; here's a plnkr to prove it: https://plnkr.co/edit/IFaueUhKE3J1K9vY1NkQ?p=preview
(simply wrapped a <div id='navigation'><ul> round the top li).
If you still loose the hover over the child-elements, it's caused by something you're not showing in the original question. E.g. adding this css:
li.menu-item {
position: relative;
top: 50px;
left: 300px;
}
would make it difficult to reach the child items because you, briefly, lose the parent-hover while moving to the child.

JQuery contextmenu Not Working On Appended Elements

JSFiddle Demo
On my mail side nav I have a custom right-click hijack of which I have just made it so you can add a new sub-folder as partly seen below;
if ($(this).hasClass('NewSubFolder')) {
if($('ul.inbox-nav li.Clicked').find('ul').length) {
$('ul.inbox-nav li.Clicked > ul').prepend("<li class='NewSubFolder'><input type='text'></li>");
} else {
$('ul.inbox-nav li.Clicked').append('<ul><li class="NewSubFolder"><input type="text"></li></ul>');
}
$("ul.inbox-nav li.Clicked").removeClass('Clicked');
}
This will add another tier where there is not one to prepend where there is, an input field. Currently you have to hit the enter key after typing something for the new folder name and then it will have worked its magic...
...However this newly appended list item does not work when you right-click it.

Hopefully this gets what you need done.
Let me know if the comments are not clear enough.
EDIT
Made an edit to combine the two on(contextmenu) calls into one function. No need for redundancy.
$(document).ready(function() {
// Trigger action when the contexmenu is about to be shown
$('#inbox-nav').on("contextmenu", 'a', function(event) {
event.preventDefault();
$('.clicked').removeClass('clicked'); //Gets rid of all other clicked elements
$(this).closest('li').addClass('clicked');
//Clicks the closest li element
var menu = ($(this).is('#inbox-nav>li>a')) ? 'MailMenuFirstTier' : 'MailMenuSecondTier';
/*This is an inline if statement, read in words it goes like this:
if this element is a direct level link, then we're going to need to use the first menu tier.
else we're going to need use the second menu tier.
*/
$("#" + menu).finish().show(100)
//dynamically calls the menu we're using.
.css({
left: event.pageX,
top: event.pageY
}); //Moves the first mail menu to the event position
});
/*
check the element to see which menut to show instead of using two different things.
*/
$(document).on('mousedown', function(e) {
//Mouse down events!
if ($('.custom-menu').is(':visible') && !$(e.target).parent().hasClass('custom-menu')) {
/*
In English:
if a custom menu is visible, AND the target of the click DOES NOT have the custom-menu class, hide the custom menu.
*/
$('.custom-menu').finish().hide();
}
if ($(e.target).parent().hasClass('custom-menu')) {
//Figure out what to do since your element is a child of the custom menu
$('.custom-menu').finish().hide();
var action = $(e.target).data('action');
//Gets our action element
var clicked = $('.clicked');
//gets the clicked element we will be working on.
switch (action) {
case 'new-folder':
//If the clicked element does not have a child ul element, add one.
$('input.rename').focusout();
//Any current input.renames will have their focus out method called
if (clicked.children('ul').length == 0) {
clicked.append($('<ul></ul>'))
}
var ul = clicked.children('ul');
//Either this child element existed before or we just made it the step before.
var input = $('<input />', {
type: 'text',
value: 'New Sub Folder',
class: 'rename',
'data-start': 'New Sub Folder',
focusout: function() {
var value = ($(this).val() == '') ? $(this).data('start') : $(this).val();
$(this).siblings('a').html(value).show();
$(this).remove();
},
autofocus: true
});
//Creates an input tag of type text, with class rename, a placeholder value, and a focusout function.
var anchor = $('<a>', {
href: '#',
css: {
display: 'none'
}
});
//Creates an anchor tag that is originally hidden
ul.append($('<li>').append([input, anchor]));
ul.find('input').click();
//Adds the (should be selected) element and the anchor
//The input element takes care of things from there
break; // end new-folder case
case 'rename-folder':
$('input.rename').focusout();
//any current input.rename items will have their focusout method called
var anchor = clicked.find('a');
//get our closest anchor of our clicked element
anchor.before($('<input />', {
type: 'text',
value: anchor.html(),
class: 'rename',
'data-start': anchor.html(),
focusout: function() {
var value = ($(this).val() == '') ? $(this).data('start') : $(this).val();
$(this).siblings('a').html(value).show();
$(this).remove();
},
autofocus: true
})).hide();
//Creates an input element, adds it before the anchor element,
//hides anchor element. the newly created input element takes care of things from there
break;
/*
ADD NEW ACTIONS HERE
*/
default:
return;
break;
}
}
}).on('keyup', 'input.rename', function(e) {
//Used for laziness. If a user hits enter in the input.rename tag, we fire the focusout target
e.preventDefault();
if (e.keyCode == 13) {
$(e.target).focusout();
}
});
});
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
font-size: 12px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
menu {
position: absolute;
}
.custom-menu .divider {
content: " ";
height: 1px;
margin: 4px 10px;
background: #929292;
}
#MailBodyList.custom-menu li.Title {
color: #929292;
}
#MailBodyList.custom-menu li.Title:hover {
background: #FFF;
cursor: default;
}
#MailBodyList.custom-menu li.ForThisSenderMore {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="inbox-nav" id="inbox-nav">
<li class="active">
<a href="javascript:;" data-type="inbox" data-title="Inbox">
<div class="Arrow"></div>Inbox
</a>
<ul>
<li>Sub-Folder 1
</li>
<li>Sub-Folder 2
</li>
<li>
Sub-Folder 3
<ul>
<li>Sub-Folder 1
</li>
<li>Sub-Folder 2
</li>
</ul>
</li>
<li>Sub-Folder 4
</li>
<li>Sub-Folder 5
</li>
</ul>
</li>
<li>
Important
</li>
<li>
Sent
</li>
<li>
<a href="javascript:;" data-type="draft" data-title="Draft"> Draft
<span class="badge badge-danger">8</span>
</a>
</li>
<li>
<a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
<span class="badge badge-info">23</span>
</a>
</li>
<li>
<a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
<span class="badge badge-warning">2</span>
</a>
</li>
<li>
News
</li>
</ul>
<ul id="MailMenuFirstTier" class="custom-menu">
<li>Mark All As Read</li>
<li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
<li class="NewSubFolder" data-action="new-folder">New Sub-Folder</li>
<li class="Rename" data-action="rename-folder">Rename</li>
<li class="Delete" data-action="delete-folder">Delete</li>
<li>Mark All As Read</li>
<li>Empty Folder</li>
</ul>

You can use .contextmenu() to overwrite right-clic behavior.
$('.NewSubFolder').contextmenu(function() {
console.log("Right clic detected!");
});
Documentation here: https://api.jquery.com/contextmenu/
I hope it helps! :)

accordion+tab = previous content does not disappear

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 the previous content disappear?
<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>

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