Menu
I've my HTML as
<div id="main">
<div class="item">String</div>
<div class="item">String</div>
<div class="item">String</div>
</div>
Clicking on each .item div sets the div clicked to display: none. When there are no divs displayed, I want the #main div to be set to display :none too.
So how do I detect that all the div .items inside the #main div are in 'display: none` mode using jQuery?
$(document).ready(function() {
$('.item').click(function(){
$(this).hide();
});
});
474
Use document.querySelector on to select a div and then select an element within it with the given class after that. We just call querySelector on the element with the ID mydiv to select items inside that div.
You want the div inside the first, be hidden, so display: none . Then, when you hover the bigger div ( . a:hover ), you want the smaller appears. So display: block when a is hover : .
You can put a div inside an div but once you do that you can only put block elements (like divs) inside the first div. And if you put an inline element inside an div only inline elements can go inside the div.
To start, wrap a div element in another div element in your HTML. Give the inner div a class name like "child" and the outer div a class name like "parent." Then in your CSS, use the class selector .parent to style the outer div. Set its height, width, and background color.
Use the :visible selector:
if (! $('#main > div:visible').length) {
$('#main').hide();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
