Change style within Class Selector

[EricBrian]

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]

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

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]

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:

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

    });
});

 

[nightelf]

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:

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

    });
});

You could also have:

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

    });
});

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