struggling with getting my closeTab
function to work, the idea is that when a tab is expanded (it turns green (active-tile
) and a up arrow is added (arrow-up
).
This works well but I'm struggling to get my closeTab
function working so that when the X is clicked, the content is hidden, active-tile
class removed & arrow-down
added.
I've left the current implementation on all but one of the tiles, (second one uses my function but doesn't work) any ideas would be great! working code pen here: https://codepen.io/simoncunningham/pen/dyOjEqK?editors=1010
function openTab(tabName, event) {
event.target.classList.add("active-tile");
event.target.children[2].classList.add("arrow-up");
var i, x;
x = document.getElementsByClassName("content");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll(".tile");
// Set up a click event handler on each of the tabs
tabs.forEach(function(tab) {
tab.addEventListener("click", function(event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function(tab) {
tab.classList.remove("active-tile");
tab.children[2].classList.remove("arrow-up");
});
// Set the background of the clicked tab
this.classList.add("active-tile");
tab.children[2].classList.add("arrow-up");
});
});
}
function closeTab(tabName, event) {
event.target.classList.remove("active-tile");
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding-right: 6rem;
padding-left: 6rem;
}
.tile,
.active-tile,
.content {
box-sizing: border-box;
}
.tile>* {
pointer-events: none;
}
.tile {
flex: 1 0 auto;
order: 0;
flex-basis: 25%;
/* For visual only */
background-color: #222;
border: 1px solid grey;
height: 150px;
text-align: center;
font-size: 16px;
color: white;
cursor: pointer;
}
.active-tile {
flex: 1 0 auto;
order: 0;
flex-basis: 25%;
/* For visual only */
text-align: center;
border: 1px solid #000;
background-color: green;
cursor: pointer;
}
.content {
order: 1;
flex: 1 0 100%;
/* For visual only */
padding: 20px;
color: white;
text-align: center;
border: 1px solid #000;
background-color: #228b22;
}
.description {
text-align: left;
}
.icon-spacing {
margin-top: 24px;
}
/* Clear floats after the tiles */
.box:after {
content: "";
display: table;
clear: both;
}
.closebtn {
float: right;
color: white;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
.arrow-up {
width: 25px;
height: 25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.specialisms-content {
padding-top: 25px;
padding-bottom: 25px;
}
/*
"Desktop" and above
*/
@media (max-width: 480px) {
.box {
flex-direction: column;
padding-right: 1rem;
padding-left: 1rem;
}
.content {
order: 0;
}
}
@media (max-width: 768px) {
.box {
padding-right: 1rem;
padding-left: 1rem;
}
}
<div class="box">
<div class="tile" onclick="openTab('b1', event);">
<img class="icon-spacing" src="./assets/Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div id="b1" class="content" style="display: none; background: #222">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span
>
<div class="description">
<h3>Banking</h3>
<p>
Description
</p>
</div>
</div>
<div class="tile" onclick="openTab('b2', event);">
<img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div
id="b2"
class="content"
style="display: none; background: #222"
>
<span
onclick="closeTab('b2', event)";
class="closebtn"
>×</span
>
<div class="description">
<h3>RegTech</h3>
<p>
Description
</p>
</div>
</div>
<div class="tile" onclick="openTab('b3', event);">
<img class="icon-spacing" src="./assets/Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div
id="b3"
class="content"
style="display: none; background: #222"
>
<span
onclick="this.parentElement.style.display='none'"
class="closebtn"
>×</span
>
<div class="description">
<h3>InsurTech</h3>
<p>
Description
</p>
</div>
</div>
<div class="tile" onclick="openTab('b4', event);">
<img class="icon-spacing" src="./assets/Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div
id="b4"
class="content"
style="display: none; background: #222"
>
<span
onclick="this.parentElement.style.display='none'"
class="closebtn"
>×</span
>
<div class="description">
<h3>Lending</h3>
<p>
Description
</p>
</div>
</div>
</div>