CODEWITHSUNDEEP
jquerycss
Marcus Leon
Marcus Leon

Reputation: 56709

Apply styles with jQuery

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.

Upvotes: 1

Views: 1748

Answers (4)

treeface
treeface

Reputation: 13351

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();
});

​

Upvotes: 1

Xodarap
Xodarap

Reputation: 11859

just change the class on the elements

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

Upvotes: 0

user113716
user113716

Reputation: 322612

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().

Upvotes: 1

chigley
chigley

Reputation: 2592

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

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

Upvotes: 2

Related Questions