FSW 14 - Components - II-Complete

fsw-14-components-ii-complete.markdown

FSW 14 - Components - II-Complete

A Pen by AngeloDeleon on CodePen.

License.

index.html

<div class="container">
  
  <div class="tab-links">
    <div class="link" data-tab="1">Tab 1</div>
    <div class="link" data-tab="2">Tab 2</div>
    <div class="link" data-tab="3">Tab 3</div>
    <div class="link" data-tab="4">Tab 4</div>
  </div>
  
  <div class="tab-content">
    <div class="content" data-tab="1">Tab 1 Content</div>
    <div class="content" data-tab="2">Tab 2 Content</div>
    <div class="content" data-tab="3">Tab 3 Content</div>
    <div class="content" data-tab="4">Tab 4 Content</div>
  </div>
</div>

script.js

class TabLink {
  constructor(link) {
    this.link = link;
    this.linkData = this.link.dataset.tab;
    
    this.tabContent = document.querySelector(`.content[data-tab='${this.linkData}']`);
   
    this.link.addEventListener('click', () => {this.linkClick(event) });
    
    //console.log(this.tabContent);
    this.tabContent = new Content(this.tabContent); 
  }
  
  linkClick() {
    this.tabContent.toggleContent();
  }
}

class Content {
  constructor(tabContent) {
    this.tabContent = tabContent;
    console.log(this.tabContent);
  }
  toggleContent() {
    this.tabContent.classList.toggle('change');
  }
}


let links = document.querySelectorAll('.link');
links = Array.from(links).map( link => new TabLink(link));

style.less

* {
  box-sizing: border-box;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

.tab-links {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  
  .link {
    padding: 20px 40px;
    background: lightgray;
    border: 1px solid black;
    cursor: pointer;
  }
  
  // .link[data-tab='1'] {
  //   color: red;
  // }
}

.tab-content {
  width: 100%;
  margin-top: 20px;
  background: lightgray;
  
  .content {
    height: 50px;
    padding: 20px;
    border: 1px solid black;
    display: none;
  }
  
  .change {
    display: block;
  }
}