Pull tab content from anywhere of the page-CodePudding

This code creates tabs, but I have issues displaying the content of the tab.

How can I rewrite the JS to be able to pull the tab-content from anywhere of my page?

const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click', function() {
    btn.forEach((item) => {
      item.classList.remove('active')
    })
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)
  })
})

<div >
  <button> Tab 1</button>
  <button> Tab 2</button>
  <button> Tab 3</button>
  <div id="tab" >
    <div>
      <h2> CONTENT HAST TO BE HERE </h2>
    </div>
    <div>
      <h2> OR HERE </h2>
    </div>
  </div>
</div>

Since I'm using WordPress shortcodes, they don't get executed. I have to place them somewhere else and then display them wherever the tabs are as tabcontent.

Recreating only the <div id="tab" > while rest stays in place is not working either.

Any ideas?

As i stated, tried to replicate the specific but did not work.

CodePudding user response：

If you want to show the active tab content, you will have to grab the value of the button that was clicked and locate the corresponding tab content.

const
  wrapper = document.querySelector('.wrapper'),
  btnArr = wrapper.querySelectorAll('button'),
  tabWrapper = wrapper.querySelector('.tabs'),
  tabArr = wrapper.querySelectorAll('.tab');

const setTab = (index) => {
  tabArr.forEach((tab, tabIndex) => {
    const isActive = tabIndex === index;
    tab.classList.toggle('active', isActive);
    btnArr[tabIndex].classList.toggle('active', isActive);
  });
  tabWrapper.setAttribute('data-tab', index);
}

const onTab = ({ target: { value } }) => setTab(value - 1);

btnArr.forEach((btn) => btn.addEventListener('click', onTab));

setTab(0); // Set initial state to tab #1

.tab { display: none; }
.tab.active { display: block; }
button.active { background: #FFD; }

<div >
  <button type="button" value="1">Tab 1</button>
  <button type="button" value="2">Tab 2</button>
  <button type="button" value="3">Tab 3</button>
  <div >
    <div >
      <h2>Tab 1 Content</h2>
    </div>
    <div >
      <h2>Tab 2 Content</h2>
    </div>
    <div >
      <h2>Tab 3 Content</h2>
    </div>
  </div>
</div>

CodePudding user response：

 const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click', function() {
    btn.forEach((item) => {
      item.classList.remove('active')
    })
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)
    //Change the content of the First H2 Element
    //Step 1 Select The HTML Element tha
    let FirstH2Element = document.querySelector('h2');
    //Step 2 : Change the FirstH2Element Text
    FirstH2Element.textContent = item.textContent // the tap content

  })
})

<div >
  <button> Tab 1</button>
  <button> Tab 2</button>
  <button> Tab 3</button>
  <div id="tab" >
    <div>
      <h2> CONTENT HAST TO BE HERE </h2>
    </div>
    <div>
      <h2> OR HERE </h2>
    </div>
  </div>
</div>