CODEWITHSUNDEEP
javascripthtmlcssevents
cts
cts

Reputation: 1084

onclick Function to use classList to add and remove CSS classes

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">&times;</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"
                >&times;</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"
                >&times;</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"
                >&times;</span
              >
              <div class="description">
                <h3>Lending</h3>
                <p>
            Description
                </p>
              </div>
            </div>
          </div>

Upvotes: 3

Views: 2313

Answers (1)

pretzelhammer
pretzelhammer

Reputation: 15115

All the code to toggle between different tiles and sections is already in your openTabs function. The closeTabs function should be a subset of that code, that just removes the .active-tile class on every tile and sets display: none on every section. Updated working example:

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) {
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  let tabs = document.querySelectorAll(".tile");
  tabs.forEach(function (tab) {
      tab.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="closeTab('b1', event)"
          class="closebtn"
          >&times;</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"
          >&times;</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="closeTab('b3', event)"
          class="closebtn"
          >&times;</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="closeTab('b4', event)"
          class="closebtn"
          >&times;</span
      >
    <div class="description">
      <h3>Lending</h3>
      <p>
        Description
      </p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions