Jquery add class display block and none

Question

Hi everyone anyone can help me in my code.

$(document).ready(function() {
     var circle = $('.circle');
     $(".send a").click(function(e) {
      e.preventDefault();
     $('.wrap').css('display', 'block');

        if (circle.hasClass('bounceInLeft')) {
         circle.removeClass('bounceInLeft').addClass('bounceOutRight');

          }
           else 
          {

         $('.circle').addClass('animated bounceOutRight');
         circle.removeClass('bounceOutRight').addClass('bounceInLeft');
           }

      });

  });

When you click .send a then .wrap will display:block . How can i add second click .send a then .wrap will display none? I know it should to be like this:

$('.wrap').css('display', 'none'); but i don't know where i can write this code...

.wrap {
  max-width: 400px;
  margin: 4em auto;
  text-align: center;
  display:none;
  background-color:#fff;
}

Josh Crozier · Accepted Answer · 2015-01-07 03:04:57Z

1

You could use .toggle() to toggle the visibility of the element on each click.

$(".send a").on('click', function(e) {
    $('.wrap').toggle();
    // ..
});

Alternatively, it would be better to use .toggleClass(), and add/remove a class such as .hide:

.hide {
    display: none; /* You may wish to increase the specificity.. */
}

$(".send a").on('click', function(e) {
    $('.wrap').toggleClass('hide');
    // ..
});

If you are insistent upon manually adding/removing inline CSS, you would just need to use a conditional statement like:

$('.wrap').is(':hidden') ? $('.wrap').show() : $('.wrap').hide();

edited Jan 7, 2015 at 3:04

answered Jan 7, 2015 at 2:58

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

1 Comment

user4082764 Over a year ago

i still add this but when use this then my animation not working on that time can you check this demo from codepen.io DEMO

I am a registered user · Accepted Answer · 2015-01-07 03:08:14Z

0

Demo

What I added was a variable that finds out how many times you have clicked the anchor element.

This way is very simple, and I hope that it works for you.
Good luck!

answered Jan 7, 2015 at 3:08

I am a registered user

5193 gold badges6 silver badges17 bronze badges

1 Comment

user4082764 Over a year ago

thanks for your answer but if you can check my DEMO then you can see what is my problem. DEMO

Collectives™ on Stack Overflow

Jquery add class display block and none

2 Answers 2

1 Comment

Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related