Apply styles with jQuery

Question

Given this CSS:

#gbox_MyGrid .s-ico span {
    display:none;
}

How would one apply this and unapply it programatically using jQuery?

That is we'd dynamically set this style to none (hide) and "" (show) using jQuery.

Not sure how you create a jQuery id representing #gbox_MyGrid .s-ico span

For background on why you'd want to do this, see this post.

Answer 1

$("#gbox_MyGrid .s-ico span").hide();
$("#gbox_MyGrid .s-ico span").show();

Should do the trick, as far as I'm aware.

Answer 2

If you want to show and hide, you can use those jQuery methods:

$('#gbox_MyGrid .s-ico span').hide();  //hides all the elements that match the selector

This will select all the elements that match the CSS selector provided, and will call .hide(), setting their style.display property to none.

Calling the .show() method will of course do the opposite of .hide().

Answer 3

just change the class on the elements

$('#gbox_MyGrid .s-ico span').toggleClass('hiddenClass')

Answer 4

To apply and unapply programmatically, you'd do this:

http://jsfiddle.net/4c8Aw/

HTML

<input type="button" value="click" />

<div id="gbox_MyGrid">
    <div class="s-ico">
        <span>test</span>
    </div>
</div>

CSS

#gbox_MyGrid .s-ico span {
    display:none;
}​

JS

$('input').click(function() {
    $("#gbox_MyGrid .s-ico span").toggle();
});

​