I am trying to create a menu where I want to hide elements if the length of either class a or class b is larger than the entire container. I want to achieve a similar effect to what Facebook has. How can I make this happen? I have thought about one approach mentioned in the comment section, but I am unsure of what steps to take next.
$('.b').hide();
$(".a").click(function(){
$(".b").slideToggle(200);
});
/*
$(document).ready(function(){
var k = $("#container").length;
var n = $(".a").length;
if (n > k) {
}
else {
}
});
*/#container
{
width: 200px;
height: 500px;
background-color: rgba(0, 0, 0, 0.3);
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.a
{
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b
{
margin-bottom: 5px;
padding: 0;
list-style-type: none;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="a"></li>
<li class="a"></li>
</ul>
</div>