Tabs buttons problems. Would like to introduce new tab that will show all banners-CodePudding

On the website, I have buttons "all", "seminars", "webinars" and "conferences". I would like to sort banners relative to the topics by pressing the buttons. So far by using the script if, for example, I press the button "seminars", it will only show me seminar.

I would like to change it in the way that if I press the button "all". All seminars, webinars, and conferences banners should appear.

JS code I have at the moment is:

//*** Tabs

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.format__button').forEach( function(tabBtn) {
    tabBtn.addEventListener('click', function(event) {
      const path = event.currentTarget.dataset.path

      document.querySelectorAll('.test__item',).forEach( function(tabContent) {
        tabContent.classList.remove('block-active')
      })
      document.querySelectorAll(`[data-target="${path}"]`).forEach( function(tabsTarget) {
        tabsTarget.classList.add('block-active')
      })
    })
  })

  //*** tabs active
  let tabsChange = document.querySelectorAll('.format__button')

  tabsChange.forEach(button => {
    button.addEventListener('click', function () {
      tabsChange.forEach(btn => btn.classList.remove('active__tab'))
      this.classList.add('active__tab')
    })
  })
})

Code in html for buttons:

<ul class="format__list">
            <li class="format__item">
              <button class="format__button" data-path="all">All</button>
            </li>
            <li class="format__item">
              <button class="format__button active__tab" data-path="seminar">Seminars</button>
            </li>
            <li class="format__item">
              <button class="format__button" data-path="vebinar">webinars</button>
            </li>
            <li class="format__item">
              <button class="format__button" data-path="conference">conferences</button>
            </li>
          </ul>

Code in html for banners:


ul class="test__list">
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item" data-target="conference">
              conference
            </li>
            <li class="test__item" data-target="seminar">
              seminar
            </li>
            <li class="test__item" data-target="seminar">
              seminar
            </li>
            <li class="test__item" data-target="seminar">
              seminar
            </li>
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item block-active" data-target="vebinar">
              vebinar
            </li>
            <li class="test__item" data-target="conference">
              conference
            </li>
          </ul>

Code in css

.test__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 200px 0;
}

.test__item {
  text-align: center;
  width: 500px;
  height: 400px;
  background-color:var(--Medex);
  font-size: 30px;
  color: white;
  font-weight: bolder;
  display: none;
}

.test__item:not(:last-child) {
  margin-bottom: 20px;
}

.test__item.block-active {
  display: block;
}

CodePudding user response：

You just need to add an if/else statement for 'all' dataset:

if(path === 'all')
    document.querySelectorAll('.test__item',).forEach( function(tabContent) {
        tabContent.classList.add('block-active')
    })
else
    document.querySelectorAll(`[data-target="${path}"]`).forEach( function(tabsTarget) {
        tabsTarget.classList.add('block-active')
    })

also, I had to change the font color from white to be able to see the texts.

Demo