Change style within Class Selector

EricBrian · Jul 1, 2009

So, I have a css class selector:

.obj_ind {display:inline}

with many divs that have have class="obj_ind".

I plan on providing a button that lets users hide all thoses divs with where class="obj_ind". So, when the users click hide Obj Inds, I need to change the display:none in the .obj_ind class selector.

Anybody know the js to do this?

Thanks
Eric

angelwatt · Jul 1, 2009

Here's a quickie function that'll get the job done.

PHP:

function HideDivs()
{
  var divs = document.getElementsByTagName('div');
  for (var a=divs.length-1; a>=0; --a) {
    if (divs[a].className == 'obj_ind') {
      divs[a].style.display == 'none';
    }
  }
}

chaosdude78 · Jul 1, 2009

There are numerous ways to do this, the easiest of which would probably be if you are using jQuery.

first, download and link the jQuery library to the page (get it at jQuery.com)

then, try something like this:

Code:

$(document).ready(function(){
    $("#buttonID").click(function(){
        $(".classToHide").css("display","none");

    });
});

nightelf · Jul 6, 2009

chaosdude78 said:
There are numerous ways to do this, the easiest of which would probably be if you are using jQuery.

first, download and link the jQuery library to the page (get it at jQuery.com)

then, try something like this:

Code:

$(document).ready(function(){ $("#buttonID").click(function(){ $(".classToHide").css("display","none"); }); });

You could also have:

Code:

$(document).ready(function(){
    $("#buttonID").click(function(){
        $(".classToHide").hide();

    });
});

If you want a nice effect you could replace hide() with fadeOut().

Search

Search

Change style within Class Selector

EricBrian

macrumors 6502a

angelwatt

Moderator emeritus

chaosdude78

macrumors newbie

nightelf

macrumors 6502

Our Staff