CODEWITHSUNDEEP
jquerycss
Frank Martin
Frank Martin

Reputation: 3441

How to do "display = block" using jquery for particular element

I am using the following CSS code to hide an element.

#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul
{
     display:none;
}

Now I am trying to make it visible using following jquery code but it is not working.

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').style.display = 'block';

How to make it work?

Upvotes: 0

Views: 2255

Answers (5)

Jai
Jai

Reputation: 74738

best solution is to use this way:

$('#DeltaPlaceHolderLeftNavBar div li > ul').show();

.show() will add the style to display:block;.

Fiddle

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to use .css()

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')

Upvotes: 2

Kamran Ahmed
Kamran Ahmed

Reputation: 12438

Try $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')

UPDATE

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show() might not work as there is a difference between them. So $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block') is the way to go.

Upvotes: 0

David Mulder
David Mulder

Reputation: 26995

The 'official' jQuery way to do this is to use the function provided by jQuery for this being

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show();

Do note however that this only works if the display:none is inline rather than in your CSS as no explicit display:block declaration is added.

So if you want to explicitly set the CSS manipulation you may also wish to use

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')

Or even get the pure element and change the styling of the pure element

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').get(0).style.display = "block";

Lastly it's a very good idea to not change css properties at all, but remove and add classes, like for example having a class .activated and removing it when the element is hidden (where display:block is only set for the activated state)

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').removeClass('activated')

The very important advantage of this is that you only change the state of the DOM and the CSS handles the way it should respond to that, rather than mixing CSS and javascript with eachother.

Upvotes: 1

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

you can use

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').prop('display', 'block');

or 

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show();

Upvotes: 0

Related Questions