How to create a HTML div collapsible both horizontally and vertically with pure CSS/JavaScript, i.e. no jQuery, no Boostrap etc.?

Question

I'd like to create something like this:

https://www.w3schools.com/howto/howto_js_collapsible.asp

But it should expand (and collapse) both vertically and horizontally. You can imagine it as a button that expands into a big div. But, in fact, it is the entire div that should expand, the button being just a part of it (inside the div).

Here is some hinting HTML:

<div class="section">
    <button type="button" class="collapsible">
        Open collapsible
    </button>
    <div class="collapsible-content">
        <p>Lorem ipsum...</p>
    </div>
</div>

I need to expand not only the "collapsible-content" div, but rather the "section" div. To lengthen it and to broaden it at the same time. Animated lengthening and broadening would be a "nice-to-have" feature, not quite necessary.

Could you, please, advice CSS and/or JavaScript appropriate to achieve this? I don't want to employ any jQuery, Bootstrap, or stuff like that.

Thanx Pavel

"not only the "collapsible-content" div, but rather the "section" div" what do you mean exactly, the section div is the one with the button in it that's already expanded? — B''H Bi'ezras -- Boruch Hashem, Aug 21 '20 at 10:00
@bluejayke, yes, sorry, you're right. I must be more specific. I actually used the solution from w3schools. I encapsulated the collapsible button and collapsible-content div into another div (class="section"). This works correctly when expanding vertically. The whole thing (both the inner div and the outer div) expands/collapses when you click the button. However, it does not expand "to the right" which was what I had originally wished for. This is why I posed this question. — Pavel Foltyn, Aug 21 '20 at 13:39

Liju · Answer 1 · 2020-08-21T15:35:23.643

If you want to keep this simple and minimal with no bells and whistles, try below code.

<html>
<head>
<style>
.section{display: inline-block;transition: .25s;background-color: lightgray; width: auto;}
.collapsible-content{height: 0px;overflow: hidden;}
</style>
<script>
function toggle(elem)
{
    sec=elem.parentElement;
    if(sec.style.width!='100%') sec.style.width='100%'; else sec.style.width='auto';
    coll=sec.getElementsByClassName("collapsible-content")[0];
    if(coll.style.height!='auto') coll.style.height='auto'; else coll.style.height='0px';
}
</script>
</head>
<body>
<div class="section">
    <button type="button" class="collapsible" onclick="toggle(this);">
        Open collapsible
    </button>
    <div class="collapsible-content">
        <p>Lorem ipsum...</p>
    </div>
</div>
</body>
</html>

Your coding style is really compact. But it does what I wanted. Thanks" — Pavel Foltyn, Aug 21 '20 at 13:54

score 1 · Answer 2 · answered Aug 21 '20 at 10:06

"You can imagine it as a button that expands into a big div. But, in fact, it is the entire div that should expand, the button being just a part of it (inside the div)."

Ok I'm guessing you want to first show a single button, then when it's clicked, show a bunch of stuff horizontally and vertically

You can do that by setting the width and height of the parent div to the exact dimensions of the button, make sure no margins, then set overflow: hidden in the parent, then on button press, change with and height to 100% or some other value depending on how much stuff you want to show, then on other chick click set dimensions back to that of the button

Yes, this makes sense. I'll try this one. – Pavel Foltyn Aug 21 '20 at 13:49 — Pavel Foltyn, Aug 21 '20 at 13:49

Ryan · Answer 3 · 2020-08-21T10:23:20.347

Give this a whirl. You can see from the background colour of the section, that it initially only has a small size.

On click, we can add a class to section that'll stretch it to cover the entire screen whilst also showing the hidden content. And it'll revert on being clicked again.

Edit: Changed the background colour so it's easier to see how the section dev expands and how the content and the button do not.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    var parent = this.parentElement;
    if (content.style.display === "block") {
      content.style.display = "none";
      parent.classList.remove("fill");
    } else {
      content.style.display = "block";
      parent.classList.add("fill");
    }
  });
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  bottom: 0;
  overflow: hidden;
  background-color: #b38686;
}

.section {
    background-color: #5128;
    width:50%;
}


.fill {
  position: absolute;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div class="section">
  <h2>Collapsibles</h2>
    <button type="button" class="collapsible">
        Open collapsible
    </button>
    <div class="content">
        <p>Lorem ipsum...</p>
    </div>
</div>

</body>
</html>

I like the idea of adding another CSS class. This is what I was about to do as well. I do not like, however, using the position property. Unfortunately, I can't show you the whole of my web site where I'm doing these collapsibles/expandables. The layout is quite complex. It leverages the "position" property elsewhere which makes it inappropriate for being used in this one. I know you could not know, of course. Thank you anyway. — Pavel Foltyn, Aug 21 '20 at 14:19

How to create a HTML div collapsible both horizontally and vertically with pure CSS/JavaScript, i.e. no jQuery, no Boostrap etc.?

3 Answers3