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?
You need to use .css()
$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')
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.
you can use
$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').prop('display', 'block');
or
$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show();
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.
best solution is to use this way:
$('#DeltaPlaceHolderLeftNavBar div li > ul').show();
.show() will add the style to display:block;.
