How to create collapsible content with split button? (HTML/CSS/JS)

Question

With two columns (left indicates name; right provide collapse function(a button)), how would you create collapsible content on the next row with full width (covers both columns)?

I am only able to collapse within a certain column. I tried to collapse a row below by creating a new div, but then the collapsing action no longer seems to work.

It should look like this:

Thank you for your help!

JavaScript is from: https://www.w3schools.com/howto/howto_js_collapsible.asp

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;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

:root {
  --colorbggray: rgb(65,65,65);
  --colorlightgray: rgb(150,150,150);
  --colorcyan: rgb(0, 229, 255);
  --colorgreen: rgb(0, 255, 0);
  --colorUpGrey: rgb(135,135,135);
  --colorLowGrey: rgb(38,38,38);
  --colorMidGrey: rgb(95,95,95);
  --colorGreen: rgb(11,69,2);
  --colorAmber: orange;
  --colorRed: red;
}

.verticalmenu-auto {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.verticalmenu-auto > div {
  border-top: 2px solid var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);  color: white;
  width: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0.5px;
  text-align: left;
  font-size: 16px;
}

.verticalmenu-auto li, {
  border-top: 2px solidauto var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);
}	

.collapsible {
  background: var(--colorMidGrey);  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
}

.collapsible:after {
  content: '\1433';
  float: center;
  transform: scale(.7, 1);
}

.active:after {
  content: "\142F";
  transform: scale(1, .7);
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.0s ease-out;
  grid-column-start: -1;
  grid-column-end: 1;
  background-color: gray;
}

<body>

<p>On right side open content which is has the width of both columns combined</p>


<ul style="list-style:none;padding-left:0;">
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    <div class='content'>
    <p> content</p>
  	</div>
    </div>
  </div>
  </li> 
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    <div class='content'>
    <p> content</p>
  	</div>
    </div>
  </div>
  </li>

halfer · Accepted Answer · 2020-03-09 00:59:02Z

A slight change in your JS toggle and also putting content outside the parent div so that it act as block

$(document).ready(function () {
    $('.collapsible').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("active");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
      accordionContent.toggleClass("active");
    	
    });
});

:root {
  --colorbggray: rgb(65,65,65);
  --colorlightgray: rgb(150,150,150);
  --colorcyan: rgb(0, 229, 255);
  --colorgreen: rgb(0, 255, 0);
  --colorUpGrey: rgb(135,135,135);
  --colorLowGrey: rgb(38,38,38);
  --colorMidGrey: rgb(95,95,95);
  --colorGreen: rgb(11,69,2);
  --colorAmber: orange;
  --colorRed: red;
}

.verticalmenu-auto {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.verticalmenu-auto > div {
  border-top: 2px solid var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);  color: white;
  width: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0.5px;
  text-align: left;
  font-size: 16px;
}

.verticalmenu-auto li, {
  border-top: 2px solidauto var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);
}	

.collapsible {
  background: var(--colorMidGrey);  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
}

.collapsible:after {
  content: '\1433';
  float: center;
  transform: scale(.7, 1);
}

.collapsible.active:after {
  content: "\142F";
  transform: scale(1, .7);
}

.content {
display: none;
  overflow: hidden;
  transition: max-height 0.0s ease-out;
  grid-column-start: -1;
  grid-column-end: 1;
  background-color: #BFBFBF;
  padding: 10px;
  color: #fff;
}
.content.active {
 height: auto;
 display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<p>On right side open content which is has the width of both columns combined</p>


<ul style="list-style:none;padding-left:0;">
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    </div>
  </div>
  
    <div class='content'>
    <p> content</p>
  	</div>
  </li> 
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    </div>
  </div>
  
    <div class='content'>
    <p> content</p>
  	</div>
  </li>

Ata · Accepted Answer · 2020-03-03 12:39:35Z

Are you need like this?

var buttons = document.querySelectorAll('.toggle');

buttons.forEach(function(el) {
  el.addEventListener('click', function(event) {
    var target = event.target.getAttribute('target');
    
    document.getElementById(target).classList.toggle('expanded');
  });
});

table {
  width: 100%;
}

table td:nth-child(2) {
  width: 100px;
}

.row-detail {
  display: none;
}

.expanded {
  display: block;
}

<table>
  <tr>
    <td>Row 1</td>
    <td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
  </tr>
  <tr id="row-detail-1" class="row-detail">
    <td colspan="2">This detail from row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
  </tr>
  <tr id="row-detail-2" class="row-detail">
    <td colspan="2">This detail from row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
  </tr>
  <tr id="row-detail-3" class="row-detail">
    <td colspan="2">This detail from row 3</td>
  </tr>
</table>

Collectives™ on Stack Overflow

How to create collapsible content with split button? (HTML/CSS/JS)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related