Change style within Class Selector

Discussion in 'Web Design and Development' started by EricBrian, Jul 1, 2009.

  1. EricBrian macrumors 6502a

    EricBrian

    Joined:
    Jul 30, 2005
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Here's a quickie function that'll get the job done.
    PHP:
    function HideDivs()
    {
      var 
    divs document.getElementsByTagName('div');
      for (var 
    a=divs.length-1a>=0; --a) {
        if (
    divs[a].className == 'obj_ind') {
          
    divs[a].style.display == 'none';
        }
      }
    }
     
  3. chaosdude78 macrumors newbie

    Joined:
    Mar 21, 2008
    #3
    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");
    
        });
    });
    
     
  4. nightelf macrumors 6502

    Joined:
    Mar 25, 2003
    #4
    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().
     

Share This Page