how to toggle between styles using Javascript or jquery

Question

I have a div with class of .ban2 and id of #banner2.

I want to change the border-radius property of this div whenever I click on the div itself. Like when iI click it for the first time the border-radius becomes 0 and when I click again it goes back to 50% 0 0 50%.

I want to toggle between these 2 styles. in my .ban2Toggle class I have all the styles included, but the border radius is 0.

it is only working once like when I click it for the first time the border radius becomes 0. The next time I click it I don't know how to get it back to normal.

.banner .ban2{
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 63vh;
  background: #5a0980;
  border-radius: 50% 0 0 50%;
  transform: scaleY(1.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s ease;
}

$('#banner2').on('click', function(){
  $('#banner2').removeClass('ban2');
  $('#banner2').addClass('ban2Toggle');
});

BOZ · Accepted Answer · 2020-11-07 20:28:35Z

1

For jQuery, you must use

$(element).toggleClass('className');

It will automatically add and remove it for you.

For JavaScript, you must use

element.classList.toggle('className');

It will automatically add and remove it for you.

Example Snippet (Run)

$('#banner2').on('click', function() {
  $('#banner2').toggleClass('ban2Toggle');
});

.banner .ban2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 63vh;
  background: #5a0980;
  border-radius: 50% 0 0 50%;
  transform: scaleY(1.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s ease;
}

.banner .ban2.ban2Toggle {
  border-radius: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner">
  <div id="banner2" class="ban2">Lorem Ipsum</div>
</div>

edited Nov 7, 2020 at 20:28

answered Nov 7, 2020 at 20:23

BOZ

2,02013 silver badges29 bronze badges

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

1 Comment

Rishi Ghosh Over a year ago

but i already have .ban2 class present. i want it to be removed and be replaced by .ban2Toggle

Hannes Geissler · Accepted Answer · 2020-11-08 07:40:50Z

1

Following the answer from BOZ you need to do it like this:

html:

<div id="banner2" class="ban2"></div>

script:

$('#banner2').on('click', function(){
  $('#banner2').toggleClass('ban2');
  $('#banner2').toggleClass('ban2Toggle');
});

edited Nov 8, 2020 at 7:40

answered Nov 7, 2020 at 20:33

Hannes Geissler

213 bronze badges

Comments

Shoaib · Accepted Answer · 2020-11-07 20:23:03Z

0

take a variable of naming flag=false; When you click on the button change the state of the flag variable to true When the flag is true make border radius 0 using conditional rendering When click again make flag false again When the flag is false make border radius 50 using again conditional rendering

answered Nov 7, 2020 at 20:23

Shoaib

902 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to toggle between styles using Javascript or jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related