Develop Reference

Jquery when slide down, changing background color

I have some HTML, CSS and JQuery Code. When I do slide down and up, I want to change my "h3" background color with jquery like the below image, it should be reddish. As a result, when I slide down, it must be changed with jquery code.
My accordion sidebar code is :
`<div id="accordion">
<ul>
<li class="active">
<h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li >
<h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class">
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-edit"></i></span>Publish</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="far fa-comments"></i></span>Engage</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-volume-up"></i></span>Listen</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-chart-line"></i></span>Report</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
</ul>
</div>`
My Accordion Css code is:
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color:#fff;
}
#accordion h3{
text-transform: uppercase;
font-size:12px;
line-height:34px;
padding:10px 10px;
cursor:pointer;
}
#accordion h3:hover{
background-color: #f55661;
}
#accordion h3:link{
background-color:red;
}
/* links */
#accordion ul ul li a{
color:white;
display:block;
font-size:11px;
line-height:27px;
padding: 0 15px;
text-decoration:none;
transition: all .1s;
background-color: #32363a;
}
/* hover effect */
#accordion ul ul li a:hover{
background-color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul{
display:none;
}
#accordion li.active ul{
display:block;
}
/* Icon font styles */
#accordion h3 span{
font-size:16px;
padding-right:10px;
}
i{
font-weight: 100;
color:#f55661;
}
h3:hover i{
color: #fff;
}
I have to change my jquery code. Here we are :
$("#accordion h3").click(function(){
// slide up the list
$("#accordion ul ul").slideUp("fast");
//$( "#accordion ul li h3 ").css('background-color', '#f55661 ');
// slide down if it is closed
if(!$(this).next().is(":visible")){
$(this).next().slideDown("fast")
}
})
Edit:I added this code but it makes all h3 reddish. I have to choose specific one, like "this" command.
$("#accordion ul li h3").css('background-color', '#f55661 ');

You can toggle a class that applies the background color using the .toggleClass() function.
Additionally, you have to loop through all other lists and remove the open class. This can be done via siblings().find('h3').removeClass('open'), which loops through all siblings, finds the h3 element and removes the open class.
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 12px;
line-height: 34px;
padding: 10px 10px;
cursor: pointer;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:link {
background-color: red;
}
.tooltip.open {
background-color: #f55661;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
background-color: #32363a;
}
/* hover effect */
#accordion ul ul li a:hover {
background-color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
}
#accordion li.active ul {
display: block;
}
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
i {
font-weight: 100;
color: #f55661;
}
h3:hover i {
color: #fff;
}
.open {
background-color: #f55661;
}
.open i{
color:white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
</ul>
</div>

As mentioned in Spectric's answer, toggling classes is probably ideal, especially if you want to apply CSS transitions to make the color change smoother.
However, given the trajectory you were on, you can accomplish what you're trying to do with the following jQuery:
$("#accordion h3").click(function(){
// Close all previously-opened menu items
$("#accordion ul ul").slideUp("fast");
// Reset color of all h3s to dark gray
$('#accordion h3').css('background-color', '#393d42')
// then...
// For the clicked header, set red bg color
$(this).css('background-color', '#f55661');
// and slide it's sub menu open
$(this).next().slideDown("fast")
})

Changing admin menu class not working on click

I want to make admin navigation. When I click a menu it will be active until I click another menu. When I click another menu that should then be active. In my admin nav, I used the below code but it is not working. All my CSS is working properly, but I can't set the clicked menu as active. How I can fix this problem?
$(function() {
$('li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
});
});
.admin-menu ul {
padding: 0;
margin: 0;
}
.admin-menu ul li {
list-style: none;
transition: .4s;
}
.admin-menu ul li a {
color: #333;
display: block;
padding: 10px 15px;
font-size: 16px;
text-transform: capitalize;
}
.admin-menu ul li:hover, li.active {
background-color: #F8694A !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="admin-nav">
<div class="admin-menu">
<ul>
<li class="active"><i class="fas fa-home"></i> Dashboard</li>
<li><i class="far fa-list-alt"></i> Category</li>
<li><i class="fas fa-book"></i> Books</li>
<li><i class="fas fa-users"></i> Users</li>
<li><i class="fas fa-chalkboard-teacher"></i> E-books</li>
<li><i class="fas fa-cart-arrow-down"></i> Orders</li>
<li><i class="fas fa-layer-group"></i> Others</li>
<li><i class="fas fa-cog"></i> Settings</li>
<li><i class="fas fa-power-off"></i> Logout</li>
</ul>
</div>
</div>

Javascript toggle working but shows unstyled menu

On my ruby on rails 5 app I have a menu button that uses javascript to toggle the menu, the toggle function is showing and hiding the menu but the menu is not styled with css anymore
onclick the menu toggles like it should but all the elements are not styled, I dont know if its related to rails or I am missing something here
//Toggle between adding and removing the "show_for_mobile" class to admin_side_bar when the user clicks on the icon
function toggleNav() {
var x = document.getElementById("admin_side_bar");
console.log(x.className)
if (x.className === "admin_side_bar") {
x.className += "show_for_mobile";
} else {
x.className = "admin_side_bar";
}
}
.admin_side_bar {
width: 70%;
height: 50vh;
background-color: #e2e6e8;
position: absolute;
left: 0;
top: 60px;
padding: 20px 10px;
display: none;
}
//show side bar on click
.show_for_mobile {
display: block;
}
.admin_side_bar>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.admin_side_bar>ul>a {
color: #3d3d3d;
font-size: 19px;
text-decoration: none;
}
.admin_side_bar>ul>a:hover {
color: #06bed3;
}
.admin_side_bar .fas {
margin-right: 20px;
color: #afaeae;
}
.admin_side_bar .fas:hover {
color: #7a7a7a;
}
.admin_side_bar>ul>a>li {
margin-bottom: 20px;
}
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
<ul>
<a href="#">
<li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
</a>
<a href="#">
<li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
</a>
<a href="#">
<li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
</a>
<a href="#">
<li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
</a>
<a href="#">
<li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
</a>
</ul>
</div>

When you add the .show_for_mobile class the original display:none from .admin_side_bar still takes precedence. If all you really want to do is show the nav then you can use x.style.display = "block"; to overwrite display:none from the admin_side_bar class
x.style.display="block" works because it adds inline style which is the highest CSS specificity (it overwrites all other css rules).
From CSS specificity
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
document.getElementById("toggleButton").addEventListener("click", toggleNav);
//Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon
function toggleNav() {
var x = document.getElementById("admin_side_bar");
if (x.className === "admin_side_bar") {
x.className += " show_for_mobile";
x.style.display = "block";
} else {
x.className = "admin_side_bar";
x.style.display = "none";
}
}
.admin_side_bar {
width: 70%;
height: 50vh;
background-color: #e2e6e8;
position: absolute;
left: 0;
top: 60px;
padding: 20px 10px;
display: none;
}
//show side bar on click
.show_for_mobile {
display: block !important;
}
.admin_side_bar>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.admin_side_bar>ul>a {
color: #3d3d3d;
font-size: 19px;
text-decoration: none;
}
.admin_side_bar>ul>a:hover {
color: #06bed3;
}
.admin_side_bar .fas {
margin-right: 20px;
color: #afaeae;
}
.admin_side_bar .fas:hover {
color: #7a7a7a;
}
.admin_side_bar>ul>a>li {
margin-bottom: 20px;
}
<button id="toggleButton">Toggle Nav</button>
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
<ul>
<a href="#">
<li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
</a>
<a href="#">
<li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
</a>
<a href="#">
<li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
</a>
<a href="#">
<li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
</a>
<a href="#">
<li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
</a>
</ul>
</div>

JS How to make the list item slide

I need to make a retractable menu, when the user touches an item it should slide on the screen, however in my code when the item is played all other items in the list also slide. I need only the touched item to slide on the screen.
My html code:
<ul id="menu-mobile">
<li class="li-mobile hospital"><i class="fa fa-plus fa-2x" aria-hidden="true"></i>Hospital</li>
<li class="li-mobile especialidades"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i>Especialidades</li>
<li class="li-mobile exames"><i class="fa fa-stethoscope fa-2x" aria-hidden="true"></i>Exames</li>
<li class="li-mobile blog">Blog</li>
<li class="li-mobile contato"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>Contato</li>
<li class="li-mobile emergencia">Emergência</li>
</ul>
$(".li-mobile").click(function(e){
if($(this).hasClass("toggle")) {
$(this).removeClass('toggle').siblings().removeClass('toggle');
}else{
$(this).addClass('toggle').siblings().removeClass('toggle');
}
});
TKS.

$(".li-mobile").click(function(e) {
$(this).siblings().removeClass('toggle');
if ($(this).hasClass("toggle")) {
$(this).removeClass('toggle');
} else {
$(this).addClass('toggle');
}
});
#menu-mobile {
right: 0;
overflow: hidden;
z-index: 999;
position: absolute;
width: 200px;
}
.li-mobile.hospital {
background-color: #EEF463;
}
.li-mobile.especialidades {
background-color: #E8B281;
}
.li-mobile.exames {
background-color: #A2C8CA;
}
.li-mobile.blog {
background-color: #CE737F;
}
.li-mobile.contato {
background-color: #007969;
}
.li-mobile.emergencia {
background-color: #CC2C69;
}
.li-mobile {
position: relative;
height: 40px;
right: -180px;
list-style-type: none;
color: #fff;
width: 100%;
font-size: 14px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.li-mobile.toggle {
right: 40px;
margin-left: 66px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="menu-mobile">
<li class="li-mobile"><i class="fa fa-plus fa-2x" aria-hidden="true"></i>Hospital</li>
<li class="li-mobile especialidades"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i>Especialidades</li>
<li class="li-mobile exames"><i class="fa fa-stethoscope fa-2x" aria-hidden="true"></i>Exames</li>
<li class="li-mobile blog">Blog</li>
<li class="li-mobile contato"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>Contato</li>
<li class="li-mobile emergencia">Emergência</li>
</ul>
The reason all the li were moving together is because of position: fixed for the ul. That is supposed to be absolute and the li is supposed to be relative for them to move independent of ul.

Javascript: "Share button" opens and closes on both comment boxes (jsfiddle)?

Javascript: Problem "Share button" opens and closes on both comment boxes (jsfiddle)? Please check example on jsfiddle or show snippet view.
When share button is clicked on, it opens the list items on other comment boxes and I don't understand how to add a fix.
https://jsfiddle.net/64t88uze/2
$( "button" ).click(function() {
$( ".share-list" ).toggle();
});
/*share buttons on each post*/
.share{float:left;list-style: none;padding: 0 10px 0 0px;margin: 0px; text-align:center; background-color:white;}
.share li {display: block;position: relative;width:80px}
.share ul {display: none;}
.share a {text-decoration: none;display: block;box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.125) inset;text-decoration: none;white-space: nowrap;color:#fff!important; border-radius:5%;}
.share ul li a:hover {text-decoration: none;}
.share li:hover li {float: none;}
.share-list {
position: absolute;
z-index: 2;
}
.COMMENTBOX{height:300px; background-color:#F1F1F1;}
.COMMENTBOX2{height:300px; background-color:#D1D1D1;}
.share-list a :hover{background-color:grey;transition: 0.3s ease}
.share-list a {box-shadow: none;border-radius:0px;}
.fa.fa-facebook,.fa.fa-twitter,.fa.fa-google-plus{font-size:40px; text-align:center; color:#fff;padding:20px; display:block;}
.share button {
padding: 0px;
background-color: inherit;
}
.fa-share-alt {color: #02bf03;padding: 10px;}
.fa.fa-facebook{background-color:#3A5795;}
.fa.fa-twitter{background-color:#26C4F1;}
.fa.fa-google-plus{background-color:#E93F2E; border-bottom-left-radius:5%;border-bottom-right-radius:5%;}
.share h3 {display: inline;padding-right:10px;}
/*end*/
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="COMMENTBOX">
<h1>Comment Box 1</h1>
<div class="share">
<li><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button>
<ul class="share-list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</li>
</div>
</DIV>
<div class="COMMENTBOX2">
<h1>Comment Box 2</h1>
<div class="share">
<li><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button>
<ul class="share-list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</li>
</div>
</DIV>

Use the following code.
$( "button" ).click(function() {
$(this).parents('.share').find('.share-list').toggle();
});
The scope in your code referes to each and every item called .share-list. You have to select the .share-list in the clicked element.

This addition adds hides "share buttons" when user clicks outside them.
$( "button" ).click(function() {
$(this).parents('.share').find('.share-list').toggle();
});
$("html").click(function(event) {
if ($(event.target).closest('.share, .share-list').length === 0) {
$('.share-list').hide();
}
});