CODEWITHSUNDEEP
javascripthtmlcss
CcCcSS
CcCcSS

Reputation: 59

Change Height (CSS/JS)

Whats wrong with my code? See Tabs 1-2, and then Tab 3.

I recently posted this question: 'How can i change the height of active tabs dynamically?' and received the following code.

As you can see, tab 1 and 2 are working fine. (Posted original question with 2 tabs. But after adding more tabs however, the dynamical change of height is not working anymore. Any suggestions?

Much appreciated

document.getElementById('tab').style.height = document.querySelector(`#tab div`).getBoundingClientRect().height + 'px'

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)

    const currentTab = index === 0 ? document.querySelector(`#tab div`) : document.querySelector(`#tab div + div`)
    document.getElementById('tab').style.height = currentTab.getBoundingClientRect().height + 'px'
  })
}  
)
.wrapper {
    overflow: hidden;
}

.tabs {
    position: relative;
    -webkit-transition: all .9s ease-in-out; 
    -moz-transition: all .9s ease-in-out; 
    -ms-transition: all .9s ease-in-out; 
    -o-transition: all .9s ease-in-out; 
    transition: all .9s ease-in-out;
 
}
.active {
 color:blue;
}
.tabs> * {
    width: 100%;
}

.tabs[data-tab='1'] {
    transform: translateX(-100%);
}

.tabs[data-tab='2'] {
    transform: translateX(-200%);
}
.tabs[data-tab='3'] {
    transform: translateX(-300%);
}
.tabs[data-tab='4'] {
    transform: translateX(-400%);
}

.inliner {

    white-space: nowrap;
}

.inliner > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 1rem;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
}
<div class="wrapper">
  
      <button> Tab 1</button>
       <button> Tab 2</button>
       <button> Tab3</button>
        
    <div id="tab" class="tabs inliner">
        <div>
            <h2>Content 1 </h2>
        
        </div>
        <div>
            <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam    </h2>
       
        </div>
        <div> <h3>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</h3>
        </div>
    </div>
</div>
<p>The Height of this text does not keep changing dynamically when clicking Tab no3</p>

Upvotes: 0

Views: 57

Answers (1)

user20699530
user20699530

Reputation: 26

I think you should make the variable currentTab point to the correct current tab.just like this

const currentTab = document.querySelector(`#tab div:nth-of-type(${index + 1})`)

Upvotes: 1

Related Questions