Goal is to have a table with multiple sections (these will vary in size, for now just using 300px as a guide). Clicking to expand/collapse all is one button, then the option to click header to expand/collapse a single section. Ideally, I’m looking to have a transition effect to slide the content down. Most of the functionality current works but the final section doesn’t seem to match.
https://jsfiddle.net/z7pc41mb/1/
html, body {
margin:0px;
padding:0px;
}
.features-container {
float: left;
max-width: 500px;visi
height: auto;
}
#box1 { visibility: hidden; height:0px; transition: height 1s; }
#box2 { visibility: hidden; height:0px; transition: height 1s; }
#box3 { visibility: hidden; height:0px; transition: height 1s; }
#box4 { visibility: hidden; height:0px; transition: height 1s; }
#boxhead { background-color: #224488; }
#box1head { background-color: #113366; }
#box2head { background-color: #113366; }
#box3head { background-color: #113366; }
#box4head { background-color: #113366; }
.sectionhead {
position: relative;
float: left;
color: #fff;
width: 500px;
height: 50px;
}
.sectioncontent {
position: relative;
float: left;
color: #fff;
width: 500px;
height: auto;
}
.subsection-row {
position: relative;
float:left;
width: 500px;
}
.subsection-col1a {
position: relative;
float: left;
color #000;
background-color: #666;
width: 300px;
height: 100px;
}
.subsection-col2a {
position: relative;
float: left;
color #000;
background-color: #666;
width: 100px;
height: 100px;
}
.subsection-col3a {
position: relative;
float: left;
color #000;
background-color: #666;
width: 100px;
height: 100px;
}
.subsection-col1b {
position: relative;
float: left;
color #000;
background-color: #888;
width: 300px;
height: 100px;
}
.subsection-col2b {
position: relative;
float: left;
color #000;
background-color: #888;
width: 100px;
height: 100px;
}
.subsection-col3b {
position: relative;
float: left;
color #000;
background-color: #888;
width: 100px;
height: 100px;
}
function ShowHideAll() {
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var box4 = document.getElementById('box4');
if (box1.style.height === "0px") {
box1.style.visibility = "visible";
box2.style.visibility = "visible";
box3.style.visibility = "visible";
box4.style.visibility = "visible";
box1.style.height = "300px";
box2.style.height = "300px";
box3.style.height = "300px";
box4.style.height = "300px";
document.getElementById('box1head').style.backgroundColor = "#3366FF";
document.getElementById('box2head').style.backgroundColor = "#3366FF";
document.getElementById('box3head').style.backgroundColor = "#3366FF";
document.getElementById('box4head').style.backgroundColor = "#3366FF";
} else {
box1.style.height = "0px";
box2.style.height = "0px";
box3.style.height = "0px";
box4.style.height = "0px";
document.getElementById('box1head').style.backgroundColor = "#113366";
document.getElementById('box2head').style.backgroundColor = "#113366";
document.getElementById('box3head').style.backgroundColor = "#113366";
document.getElementById('box4head').style.backgroundColor = "#113366";
}
}
function showHtmlDiv(toggable) {
var htmlShow = document.getElementById(toggable);
var HeadID = "head";
var newHeadID = toggable + HeadID;
var htmlShowHead = document.getElementById(newHeadID);
if (htmlShow.style.height === "0px") {
htmlShow.style.visibility = "visible";
htmlShow.style.height = "300px";
htmlShowHead.style.backgroundColor = "#3366FF";
} else {
htmlShow.style.height = "0px";
htmlShowHead.style.backgroundColor = "#113366";
}
}
<div class='features-container'>
<div id='boxhead' class='sectionhead' onclick="ShowHideAll()">Show/Hide All</div>
<div id='box1head' class='sectionhead' onclick="showHtmlDiv('box1')">Section Header #1</div>
<div class='sectioncontent' id="box1">
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 1 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1b'>SECTION 1 COL 2</div>
<div class='subsection-col2b'>COL 2</div>
<div class='subsection-col3b'>COL 2</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 1 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
</div>
<div id='box2head' class='sectionhead' onclick="showHtmlDiv('box2')">Section Header #2</div>
<div class='sectioncontent' id="box2">
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 2 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1b'>SECTION 2 COL 2</div>
<div class='subsection-col2b'>COL 2</div>
<div class='subsection-col3b'>COL 2</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 2 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
</div>
<div id='box3head' class='sectionhead' onclick="showHtmlDiv('box3')">Section Header #3</div>
<div class='sectioncontent' id="box3">
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 3 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1b'>SECTION 3 COL 2</div>
<div class='subsection-col2b'>COL 2</div>
<div class='subsection-col3b'>COL 2</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 3 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
</div>
<div id='box4head' class='sectionhead' onclick="showHtmlDiv('box4')">Section Header #4</div>
<div class='sectioncontent' id="box4">
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 4 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1b'>SECTION 4 COL 2</div>
<div class='subsection-col2b'>COL 2</div>
<div class='subsection-col3b'>COL 2</div>
</div>
<div class='subsection-row'>
<div class='subsection-col1a'>SECTION 4 COL 1</div>
<div class='subsection-col2a'>COL 2</div>
<div class='subsection-col3a'>COL 3</div>
</div>
</div>
<div>
Initially, it was built using display:block, to show/hide the div onClick, but a decision was made that we want the transition animation to slowly display the content. This led me to switch to visiblity and height, but it didn’t function for the last section, which would just display/hide rather than transition. I attempted to drop to 3 sections thinking maybe I made an error with the 4th sections settings but the issue persists.
My understanding is that the div is actually appearning/disappearing appropriately, but the children aren’t collapsing, which is why they appear visible but only showing the last as it’s essentially sitting on top.