How to close element on second click? Using event click

Question

What I'm trying to accomplish is to make a list with headings and on click at one it will show up a little description about the heading.

So far it only opens but it doesn't close. I tried to manipulate classes with if statements as well as I was searching for a solution but without success.

js:

export default function openTitle() {
  const colTitle = document.querySelectorAll('.col-title');
  const colContainer = document.querySelector('.col-container');
  const colContent = document.querySelectorAll('.col-content');

  colContainer.addEventListener('click', function (e) {
    const clicked = e.target.closest('.col-title');

    if (!clicked) return;

    document.querySelector(
      `.operations__content--${clicked.dataset.tab}`
    ).style.display = 'block';
    
  });
}

html:

<div class="col-container">
            <div class="col">
              <div class="col-title" data-tab="1">
                <h3>Lorem</h3>
                <i class="fas fa-chevron-up"></i>
              </div>
              <div class="col-content operations__content--1">
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
                  Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
                  exercitationem.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="col-title" data-tab="2">
                <h3>Lorem</h3>
                <i class="fas fa-chevron-up"></i>
              </div>
              <div class="col-content operations__content--2">
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
                  Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
                  exercitationem.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="col-title" data-tab="3">
                <h3>Lorem</h3>
                <i class="fas fa-chevron-up"></i>
              </div>
              <div class="col-content operations__content--3">
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
                  Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
                  exercitationem.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="col-title" data-tab="4">
                <h3>Lorem</h3>
                <i class="fas fa-chevron-up"></i>
              </div>
              <div class="col-content operations__content--4">
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
                  Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
                  exercitationem.
                </p>
              </div>
            </div>
          </div>

Answer 1

Here's a minimal reproducable example using event delegation and [element].classList.toggle to toggle visibility.

document.addEventListener("click", handle);

function handle(evt) {
  const origin = evt.target;
  const item = origin.closest("[data-item]");
  if (item) {
    item.querySelector(".txt").classList.toggle("show");
  }
}

body {
  font: normal 12px/15px Lato, verdana, arial;
  margin: 2rem;
}

[data-item] {
  margin-bottom: 1rem;
}

.header {
   font-size: 1.3em;
   font-weight: bold;
   cursor: pointer;
}

.txt {
  display: none;
  margin-top: 0.3rem;
}

.txt.show {
  display: block;
}

<div data-item>
 <div class="header">Header</div>
 <div class="txt">Lorem ipsem etc</div>
</div>

<div data-item>
 <div class="header"><i>Another</i> header </div>
 <div class="txt">Ipsem Lorem etc</div>
</div>

Answer 2

Create a CSS class and use the classList API to toggle it:

element.classList.toggle('hidden')

function openTitle() {
  const colContainer = document.querySelector('.col-container');

  colContainer.addEventListener('click', function(e) {
    const clicked = e.target.closest('.col-title');

    if (!clicked) return;
    document.querySelector(
      `.operations__content--${clicked.dataset.tab}`
    ).classList.toggle('hidden');

  });
}
openTitle();

.hidden {
  display: none;
}

<div class="col-container">
  <div class="col">
    <div class="col-title" data-tab="1">
      <h3>Lorem</h3>
      <i class="fas fa-chevron-up"></i>
    </div>
    <div class="col-content operations__content--1 hidden">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
      </p>
    </div>
  </div>
  <div class="col">
    <div class="col-title" data-tab="2">
      <h3>Lorem</h3>
      <i class="fas fa-chevron-up"></i>
    </div>
    <div class="col-content operations__content--2 hidden">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
      </p>
    </div>
  </div>
  <div class="col">
    <div class="col-title" data-tab="3">
      <h3>Lorem</h3>
      <i class="fas fa-chevron-up"></i>
    </div>
    <div class="col-content operations__content--3 hidden">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
      </p>
    </div>
  </div>
  <div class="col">
    <div class="col-title" data-tab="4">
      <h3>Lorem</h3>
      <i class="fas fa-chevron-up"></i>
    </div>
    <div class="col-content operations__content--4 hidden">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
      </p>
    </div>
  </div>
</div>