CODEWITHSUNDEEP
jquery
Shiro
Shiro

Reputation: 273

Close button to remove all classes on a div and hides when all those divs has no .extra class

Hi I'm trying to make a script, I'm new to jQuery and still learning.

But I wanted to ask how to make this code work, 

$(document).ready(function() {

  if($(".divs").hasClass('extra'))
    {
        $(".close-divs-button").css('display', 'none');
      }
      else
      {
        $(".close-divs-button").css('display', 'block');
    }

});

I have several Divs that when it is clicked, it adds a .extra class to expand that DIV.

I also want the .close-divs-button to only show when atleast 3 or more DIVS has a .EXTRA class in it so the user won't have to toggle the class and remove .extra by clicking them one by one, I wanted to add a button to have that global close function.

Help would be really appreciated.

Upvotes: 0

Views: 202

Answers (3)

Pankucins
Pankucins

Reputation: 1720

I went ahead and added pretty much all of the logic. What you want to do is check the element count with javascript .length property as previously stated, though, I assume you want to close elements when there are more than three, not exactly three of them.
So, the logic there would be

 if($(".extra").length > 2){
     $(".close-divs-button").show();   
 }else{
     $(".close-divs-button").hide();
 }

Here's a fiddle with the example I mentioned - http://jsfiddle.net/friiks/wgcmn/.

Upvotes: 1

ssilas777
ssilas777

Reputation: 9764

I think your logic will goes some thing like this..

if($('div.extra').length >= 3)
{
   $(".close-divs-button").show();
}else{
   $(".close-divs-button").hide();
}

Upvotes: 1

andrewb
andrewb

Reputation: 3095

To get the number of elements which have a class of 'extra':

var x = $('.extra').length;
if(x == 3)
{
    // logic goes here
}

Upvotes: 0

Related Questions