CSS doesn't react when Jquery adding .active class

Question

When I'm pressing toggle button , jquery adds '.active' class to '.sidebar-contact', then in css .sidebar-contact.active should be activated , but nothing happens.

CSS

.sidebar-contact{
 position: fixed;
 transform: translateY(-50%);
 top: 50%;
 left: -350px;
 width: 350px;
 height: auto;
 padding: 20px;
 background: #fff;
 box-sizing: border-box;
 transition: .5s;

 }
 .sidebar-contact.active
 {
   left:0px;

 }
 .toggle{
 position: absolute;
 top: 0;
 right: -48px;
 width: 48px;
 height: 48px;
 line-height: 48px;
 cursor: pointer;
 text-align: center;
 background: #f00;
 }

jQuery

 $(document).ready(function(){
   $('.toggle').click(function(){
    $('.sidebar-contact').toggleClass('.active')
   });
 });

BenM · Accepted Answer · 2018-08-18 12:56:16Z

3

You need to remove the . before the class definition inside toggleClass:

$('.toggle').click(function(){
  $('.sidebar-contact').toggleClass('active')
});

.sidebar-contact {
  background: blue;
  height: 200px;
  width: 200px;
}

.sidebar-contact.active {
  background: green;
}

button { margin-top: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sidebar-contact"></div>
<button class="toggle">Toggle</button>

answered Aug 18, 2018 at 12:56

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS doesn't react when Jquery adding .active class

CSS

jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

CSS

jQuery

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related