JQuery Accordion Menu Color Keep Change When Selected

Question

When I clicked to the menu, sub-menu will come out (dropdown)... How can I make the background color of the menu when selected, and as long as it selected (dropdown open), same as hover color... it will back to initial color when I close the dropdown, thanks

you can check my work here : teknomia homepage

$(document).ready(function() { $("#accordion h3").click(function(){ $("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})

#accordion {margin: auto; border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; width: 90%;}
#accordion h3 {font-size: 150%; padding: 45px 15px; color:#333; cursor: pointer; background:#fff; border-bottom:4px solid #333;}
#accordion h3:hover {background:#EA4335;}

#accordion li {list-style-type: none; padding:0; margin:0;}
#accordion li:nth-child(odd){background-color:#A1C5FF;}
#accordion li:nth-child(even){background-color:#4285F4;}

#accordion ul ul li a {border-bottom:2px solid #333; color: #3b3b3b; text-decoration: none; font: 15px; display: block; padding: 8px 0 8px 8px;}
#accordion ul ul li a:hover {background:#34A853; padding-left:15px;}

#accordion ul ul {display: none;}
#accordion li .active ul {display: block;}
#accordion ul{list-style:none; margin:0; padding:0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li><h3>
Whatsapp Mod</h3>
<ul>
<li><a href="/">Sub Heading 1</a></li>
<li><a href="/">Sub Heading 2</a></li>
<li><a href="/">Sub Heading 3</a></li>
</ul>
</li>
<li><h3>
Game PC</h3>
<ul>
<li><a href="/">Sub Heading 4</a></li>
<li><a href="/">Sub Heading 5</a></li>
<li><a href="/">Sub Heading 6</a></li>
</ul>
</li>
<li><h3>
Main Heading 3</h3>
<ul>
<li><a href="/">Sub Heading 7</a></li>
<li><a href="/">Sub Heading 8</a></li>
<li><a href="/">Sub Heading 9</a></li>
</ul>
</li>
<li><h3>
Main Heading 4</h3>
<ul>
<li><a href="/">Sub Heading 10</a></li>
<li><a href="/">Sub Heading 11</a></li>
<li><a href="/">Sub Heading 12</a></li>
</ul>
</li>
</ul>
</div>

Answer 1

Make a class, let's say active, which will have the same style as the :hover styles. Add that class to the h3 element when you slide down the corresponding list to give the desired effect.

Here's a modified version of your snippet that does the same thing.

$(document).ready(function() { 
  $("#accordion h3").click(function(){ 
    $("#accordion ul ul").slideUp();
    $("#accordion ul li h3").removeClass('active');
    if(!$(this).next().is(":visible")) {
      $(this).next().slideDown();
      $(this).addClass('active');
    }
  })
})

#accordion {margin: auto; border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; width: 90%;}
#accordion h3 {font-size: 150%; padding: 45px 15px; color:#333; cursor: pointer; background:#fff; border-bottom:4px solid #333;}
#accordion h3:hover {background:#EA4335;}
#accordion h3.active {background:#EA4335;}

#accordion li {list-style-type: none; padding:0; margin:0;}
#accordion li:nth-child(odd){background-color:#A1C5FF;}
#accordion li:nth-child(even){background-color:#4285F4;}

#accordion ul ul li a {border-bottom:2px solid #333; color: #3b3b3b; text-decoration: none; font: 15px; display: block; padding: 8px 0 8px 8px;}
#accordion ul ul li a:hover {background:#34A853; padding-left:15px;}

#accordion ul ul {display: none;}
#accordion li .active ul {display: block;}
#accordion ul{list-style:none; margin:0; padding:0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li><h3>
Whatsapp Mod</h3>
<ul>
<li><a href="/">Sub Heading 1</a></li>
<li><a href="/">Sub Heading 2</a></li>
<li><a href="/">Sub Heading 3</a></li>
</ul>
</li>
<li><h3>
Game PC</h3>
<ul>
<li><a href="/">Sub Heading 4</a></li>
<li><a href="/">Sub Heading 5</a></li>
<li><a href="/">Sub Heading 6</a></li>
</ul>
</li>
<li><h3>
Main Heading 3</h3>
<ul>
<li><a href="/">Sub Heading 7</a></li>
<li><a href="/">Sub Heading 8</a></li>
<li><a href="/">Sub Heading 9</a></li>
</ul>
</li>
<li><h3>
Main Heading 4</h3>
<ul>
<li><a href="/">Sub Heading 10</a></li>
<li><a href="/">Sub Heading 11</a></li>
<li><a href="/">Sub Heading 12</a></li>
</ul>
</li>
</ul>
</div>

I hope this helps 🤗