Change Css Through Jquery After A Click On A Div

The below code isn't working, Is there anything wrong in this code, when I click on div.first it has to show div.second and a click again should make it display none. Html

Solution 1:

It's best to use classes to hide and show Elements

HTML

<divclass="first">some text</div><divclass ="second div-hide">bunch of text</div>

CSS

.div-hide{display:none}

JQUERY

$('.first').click(function() {
   if ($('.second').hasClass('div-hide'))
   {
        $('.second').removeClass('div-hide');
   }
   else
   {
       $('.second').addClass('div-hide');
   }
});

Solution 2:

Use $.toggle() to toggle display

$('.first').click(function() {
  $('.second').toggle();
});

.second{display=none;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="first">some text</div><divclass ="second">bunch of text</div>

Solution 3:

In your JQuery, you forgot the period in front of second

$('.first').click(function() {
     $('.second').css('display', 'block');
});

Solution 4:

Use $('.second').toggle();

 $('.first').click(function() {
  $('.second').toggle();
});

.second{display=none;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="first">some text</div><divclass ="second">bunch of text</div>

Solution 5:

You simply need this

$('.first').click(function() {
  $('.second').toggle();
});

Here is an example

$('.first').click(function() {
  $('.second').toggle();
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="first">some text</div><divclass ="second">bunch of text</div>

Share