CODEWITHSUNDEEP
javascripttabsjquery-ui-tabs
clarkf
clarkf

Reputation: 711

How to activate the parent tab content using javascript?

How can I activate the "Main tab 1" and "Main tab 2" if I click its children tab?.

So this is what I want to happen if I click the "Outer tab 1" and "Outer tab 2" it will activate the parent "Main tab 1", and if I click the "Outer tab 3" and "Outer tab 4" it will activate the parent "Main tab 2".

To better understand check the code below. Also here is the codepen https://codepen.io/.

const mainTabs = document.querySelectorAll(".main-tab-btn");
const childTabs = document.querySelectorAll(".child-tab-btn");
const contents = document.querySelectorAll(".content");
const buttons = document.querySelectorAll("button");
    
function SetContent(tabIdx)
{
   // reset all contents
   contents.forEach(content => {
      content.classList.remove("active");
   });
   const content = document.getElementById(tabIdx);
   content.classList.add("active");
}

function ResetButtons(){
   buttons.forEach(btn=> {
     btn.classList.remove("active");
   });
}

// add eventlisteners to all the maintab buttons
mainTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     e.target.classList.add("active");
  });
});

// add eventlisteners to all the childtabs button
childTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     const button = document.querySelector(`.main-tab-btn[data-id="${id}"]`);
      button.classList.add("active");
      e.target.classList.add("active");
  })
})
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');

body {
  font-family: 'Jost', sans-serif;
  background-color: #f0f5ff;
}

h1 {
  font-size: 48px;
  color: #232c3d;
  text-align:center;
}

.wrapper {
  width: 590px;
  margin: auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
}

.buttonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

button {
  letter-spacing: 3px;
  border: none;
  padding: 10px;
  background-color: green;
  color: #232c3d;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background-color: inherit;
}

button.active {
  background-color: orange;
}

.active {
  background-color: white;
}

p {
  text-align: left;
  padding: 10px;
}

.content {
  display: none;
  padding: 10px 20px;
}

.content.active {
  display: block;
}
<h1>TOGGLE TABS</h1>
  
  <div class="wrapper">
    
    <div class="buttonWrapper">
      <button class="tab-button main-tab-btn active" style="border-top-left-radius: 10px;" data-id="maintab1">Main tab 1</button>
      <button class="tab-button main-tab-btn" data-id="maintab2">Main tab 2</button>
    </div>
    
    <div class="contentWrapper">
      <div class="content active" id="maintab1">
        Main Tab 1 Content
      </div>
      <div class="content" id="maintab2">
        Main Tab 2 Content
      </div>
    </div>
    
    <div class="outer-tab">
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 1</button>
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 2</button>
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 3</button>
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 4</button>
    </div>
    
    <div class="outer-content">
      <div class="outer-tab-content">Outer tab 1 content</div>
      <div class="outer-tab-content">Outer tab 2 content</div>
      <div class="outer-tab-content">Outer tab 3 content</div>
      <div class="outer-tab-content">Outer tab 4 content</div>
    </div>
    
  </div>

Upvotes: 0

Views: 63

Answers (1)

JW Yap
JW Yap

Reputation: 130

Explanation

There are plenty ways to achieve what you want, I'll just show you one of them to inspire you.

Step 1: Add new class "main-tab-btn" to parent wrapper to distinct them from the child buttons.

Step 2: Add the class "child-tab-btn" to child wrapper to distinct them from parent buttons

Step 3: Add the attributes "data-id" to child buttons accordingly

HTML

<body>
  <h1>TOGGLE TABS</h1>
  
  <div class="wrapper">
    
    <div class="buttonWrapper">
      <button class="tab-button main-tab-btn active" style="border-top-left-radius: 10px;" data-id="maintab1">Main tab 1</button>
      <button class="tab-button main-tab-btn" data-id="maintab2">Main tab 2</button>
    </div>
    
    <div class="contentWrapper">
      <div class="content active" id="maintab1">
        Main Tab 1 Content
      </div>
      <div class="content" id="maintab2">
        Main Tab 2 Content
      </div>
    </div>
    
    <div class="outer-tab">
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 1</button>
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 2</button>
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 3</button>
      <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 4</button>
    </div>
    
  </div>
</body>
</html>

Javascript

Step 1: Using querySelectorAll to group the elements (parent, child, contents) accordingly

Step 2: Add EventListener accordingly to parent and child

const mainTabs = document.querySelectorAll(".main-tab-btn");
const childTabs = document.querySelectorAll(".child-tab-btn");
const contents = document.querySelectorAll(".content");
const buttons = document.querySelectorAll("button");
    
function SetContent(tabIdx)
{
   // reset all contents
   contents.forEach(content => {
      content.classList.remove("active");
   });
   const content = document.getElementById(tabIdx);
   content.classList.add("active");
}

function ResetButtons(){
   buttons.forEach(btn=> {
     btn.classList.remove("active");
   });
}

// add eventlisteners to all the maintab buttons
mainTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     e.target.classList.add("active");
  });
});

// add eventlisteners to all the childtabs button
childTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     const button = document.querySelector(`.main-tab-btn[data-id="${id}"]`);
      button.classList.add("active");
      e.target.classList.add("active");
  })
})

Upvotes: 1

Related Questions