user1929922 user1929922 - 1 month ago 21
CSS Question

How do I minimize a div and hide containing divs?

So currently, I have jQuery in a function that reduces a div to 20px when a certain toggle button is clicked. I want all the divs inside of that div to hide as well, but I don't want to resort to recursive functions/loops if at all possible. Currently, my toggle button kind of works, but when I hide a div all of its children (if it has any) remain where they were before. Can I simply force the height to 20px and make all the containing divs disappear as well? A good example of what I need would be like hiding a comment chain on a board (such as reddit). Thanks.

Sure, code:

function toggleComment(child)
{
if (child.innerHTML.includes("–"))
{
//Minimizing
child.innerHTML = "[+]";
$(child).parent().addClass("minimized");
hideChildren($(child).parent());
}
else
{
//Maximizing
child.innerHTML = "[–]";
$(child).parent().removeClass("minimized");
showChildren($(child).parent());
}
}

function hideChildren(parent)
{
for (var i = 0; i < parent.children().length; i++)
{
var child = parent.children().eq(i);
if (!child.hasClass('ignoreOnHide'))
{
parent.children().eq(i).hide();
}
if (child.has("div"))
{
hideChildren(child);
}
}
}

function showChildren(parent)
{
for (var i = 0; i < parent.children().length; i++)
{
var child = parent.children().eq(i);
parent.children().eq(i).show();
}
}


This code partially works. It visually functions as intended, but there become more complicated problems. I would like to not use recursive functions and loops, because, again, it doesn't work exactly as intended. The exact problems are difficult to explain and not pertinent to this question. Is there any other way to go about this problem, to minimize a div and completely hide its content, without loops & such?

Answer

Try adding

overflow:hidden;

to your parent div to hide the elements positioned outside it's width/height