Change Height (CSS/JS)

Question

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>

user20699530 · Accepted Answer · 2022-12-06 07:32:31Z

1

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})`)

answered Dec 6, 2022 at 7:32

user20699530

261 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

CcCcSS Over a year ago

man thank you so much had some good headaches because of that

Collectives™ on Stack Overflow

Change Height (CSS/JS)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related