Jquery when slide down, changing background color

Question

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 :

`
  
    
      Notifications29
    
    
      Summary 
    
      Lorem
      Ipsum
    
      

    
      Publish
    
      Lorem
      Ipsum
      
    
    

 
      Engage
    
      Lorem
      Ipsum
    
    

    
        Listen
      
        Lorem
        Ipsum
      
      

      
        Report
      
        Lorem
        Ipsum
        
      
      


  
`

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  ');

user_14251221 · Answer

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;
}




  
    
      Notifications29
    
    
      Summary 
      
        Lorem
        Ipsum
      
    

    
      Publish
      
        Lorem
        Ipsum

      
    

    
      Engage
      
        Lorem
        Ipsum
      
    

    
      Listen
      
        Lorem
        Ipsum
      
    

    
      Report
      
        Lorem
        Ipsum

user_5295093 · Answer

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")
})

Jquery when slide down, changing background color

2 Answers