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

user_3655847 0
Viewed 1106

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

collapsable expandable css html javascript
3 Answers

"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

user_20168310

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>

user_136082280

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>

user_57050040
Related