Question

I have the following jQuery which toggles an accordion menu on clicking a button:

jQuery:

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle();
 });    
});

It works great!

Now, I was wondering if I can change both the CSS height and background elements on toggle too. So, when I click on chooseOption it will change the height and background of that element.

Default CSS:

#chooseOption {height:35px;background-image:url('1.jpg');}

On Click it would change to:

#chooseOption {height:55px;background-image:url('2.jpg');}

Many thanks for any pointers with this.

Answer 1

Answer 😀

$(function() {  
   $('#chooseOption').click(function(){
     $('#accordion ul').toggle();
     $('#chooseOption').toggleClass("chooseOptionNew");
   });    
});