"Even when hidden, an HTML Div element still occupies space on the

Question

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using:

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");

    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}

The code implementation seems to be working fine, but there is a problem with the hidden tab content taking up space. Applying position: absolute; fixes this issue; however, it causes the content to overlap with the footer. Is there a way to prevent the hidden tab content from occupying space without interfering with the layout of the footer?

javascript html css

Answer 1

Answer №1

It is advisable to utilize the display property instead of opacity.

Furthermore, ensure that you set div to display: block; within div.active as shown below:

.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
  display: block; /* show it */
}

Note that if you want to assign a different display property to div within div.active, you need to include !important to ensure proper application.

Additionally, make changes to your JavaScript for loop as follows:

/** IF to point to the right div **/
    if(tabsPane[i].className.match(/\bstat\b/)){
      document.getElementById("stat").classList.add('active');
      document.getElementById("userManagement").classList.remove('active');
    }else if(tabsPane[i].className.match(/\buserManagement\b/)){
       document.getElementById("userManagement").classList.add('active');
      document.getElementById("stat").classList.remove('active');
    }

To ensure functionality, additional classes and IDs such as stat and userManagement were added due to identification issues with the div element previously.

DEMO (Simple example):

DEMO (Large example):

Answer 2

It is advisable to utilize the display property instead of opacity.

Furthermore, ensure that you set div to display: block; within div.active as shown below:

.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
  display: block; /* show it */
}

Note that if you want to assign a different display property to div within div.active, you need to include !important to ensure proper application.

Additionally, make changes to your JavaScript for loop as follows:

/** IF to point to the right div **/
    if(tabsPane[i].className.match(/\bstat\b/)){
      document.getElementById("stat").classList.add('active');
      document.getElementById("userManagement").classList.remove('active');
    }else if(tabsPane[i].className.match(/\buserManagement\b/)){
       document.getElementById("userManagement").classList.add('active');
      document.getElementById("stat").classList.remove('active');
    }

To ensure functionality, additional classes and IDs such as stat and userManagement were added due to identification issues with the div element previously.

DEMO (Simple example):

DEMO (Large example):

Answer 3

Answer №2

To hide the inactive element, you can utilize display: none and display: block instead of using opacity: 0 and opacity: 1:

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");

    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}

/*--------------Styles for Tabbed Page----------------*/

body {
  font-family: Arial;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.tabbedpage {
  padding: 20px 0px;
}

.tabbedpage .tabbedpage-header {
  height: 60px;
  display: flex;
  align-items: center;
}

.tabbedpage .tabbedpage-header>div {
  width: calc(100% / 2);
  text-align: center;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase;
  outline: none;
}

.tabbedpage .tabbedpage-header>div>i {
  display: block;
  margin-bottom: 5px;
}

.tabbedpage .tabbedpage-header>div.active {
  color: #d81e05;
  display: block;
}

.tabbedpage .tabbedpage-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background: #d81e05;
  left: 0px;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.tabbedpage .tabbedpage-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 10px 5px;
}

.tabbedpage .tabbedpage-content>div {
  width: 100%;
  top: 0;
  left: 0;
  display: none; /* hide it */
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}

.tabbedpage .tabbedpage-content>div.active {
  display: block; /* show it */
}

/*------------------------------------------*/

<div class="container">
  <div class="tabbedpage">
    <div class="tabbedpage-header">
      <div class="active">
        statistics
      </div>
      <div>
        user management
      </div>
    </div>
    <div class="tabbedpage-indicator"></div>
    <div class="tabbedpage-content">
      <div class="active">
        <h2>This is statistics section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
      </div>
      <div>
        <h2>This is the user management section</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="red-bar">
    <div class="container content">
      <p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
    </div>
  </div>
</footer>

Answer 4

To hide the inactive element, you can utilize display: none and display: block instead of using opacity: 0 and opacity: 1:

let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for (let i = 0; i < tabsPane.length; i++) {
  tabsPane[i].addEventListener("click", function() {
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabContent.getElementsByClassName("active")[0].classList.remove("active");
    tabContent.getElementsByTagName("div")[i].classList.add("active");

    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
  });
}

/*--------------Styles for Tabbed Page----------------*/

body {
  font-family: Arial;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.tabbedpage {
  padding: 20px 0px;
}

.tabbedpage .tabbedpage-header {
  height: 60px;
  display: flex;
  align-items: center;
}

.tabbedpage .tabbedpage-header>div {
  width: calc(100% / 2);
  text-align: center;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  text-transform: uppercase;
  outline: none;
}

.tabbedpage .tabbedpage-header>div>i {
  display: block;
  margin-bottom: 5px;
}

.tabbedpage .tabbedpage-header>div.active {
  color: #d81e05;
  display: block;
}

.tabbedpage .tabbedpage-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background: #d81e05;
  left: 0px;
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.tabbedpage .tabbedpage-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 10px 5px;
}

.tabbedpage .tabbedpage-content>div {
  width: 100%;
  top: 0;
  left: 0;
  display: none; /* hide it */
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}

.tabbedpage .tabbedpage-content>div.active {
  display: block; /* show it */
}

/*------------------------------------------*/

<div class="container">
  <div class="tabbedpage">
    <div class="tabbedpage-header">
      <div class="active">
        statistics
      </div>
      <div>
        user management
      </div>
    </div>
    <div class="tabbedpage-indicator"></div>
    <div class="tabbedpage-content">
      <div class="active">
        <h2>This is statistics section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
      </div>
      <div>
        <h2>This is the user management section</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="red-bar">
    <div class="container content">
      <p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
    </div>
  </div>
</footer>

Answer 5

Answer №3

If you need to manipulate the document by adding or removing a div as needed, you can utilize document.write(). Here's an example:

function updateDocument(){
  document.write("<div> hello </div>")
}

#button{
background-color: blue;
padding: 10px 20px;
}
#button:hover{
background-color: lightblue;
}

<button onclick="updateDocument()" id="button">Click here to add a div saying hello</button>

Answer 6

If you need to manipulate the document by adding or removing a div as needed, you can utilize document.write(). Here's an example:

function updateDocument(){
  document.write("<div> hello </div>")
}

#button{
background-color: blue;
padding: 10px 20px;
}
#button:hover{
background-color: lightblue;
}

<button onclick="updateDocument()" id="button">Click here to add a div saying hello</button>

Answer 7

Answer №4

In my opinion, it would be more effective to utilize the CSS property display rather than opacity, as suggested by @MaxiGui. For added flair, you could also consider creating a custom tag for this purpose:

.invisible {
  display:none;
}

Answer 8

In my opinion, it would be more effective to utilize the CSS property display rather than opacity, as suggested by @MaxiGui. For added flair, you could also consider creating a custom tag for this purpose:

.invisible {
  display:none;
}

Answer 9

Answer №5

To address this issue temporarily, you have the option to adjust the footer design like this.

footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}

Answer 10

To address this issue temporarily, you have the option to adjust the footer design like this.

footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}

"Even when hidden, an HTML Div element still occupies space on the

Answer №1

DEMO (Simple example):

DEMO (Large example):

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Changing the order of element names depending on their location within the parent element using jQuery

Utilize Javascript to create a function that organizes numbers in ascending order

Validating Credit Card Expiration Dates in AngularJS Form

Is it possible to update only the inner text of all elements throughout a webpage?

Toggle the sliding menu drawer option (upward/downward motion)

Conceal an element along with its space, then signal the application to show alternative content using React

Display the percentage text behind a filling Bootstrap progress bar

Fundamentals of object property in jQuery and Javascript

Tips for Concealing PHP Undefined Error Messages Using Echo

Combining multiple HTML elements onto a single page with just one function

What is the best way to explain the concept of type indexing in TypeScript using its own keys?

Why is it that when implementing React JS, the function setState is not updating the values on the chart when a Button is

Using Angular 7 shared service to allow sibling components to exchange data between each other

Leverage React Context beyond the confines of a React component

execute function once eventlistener completes running

Ensure that both tables contain columns of equal size

Tips for arranging letters on separate lines using CSS

What is the best way to make the child Div float to the bottom of the parent Div?

Dealing with an Undefined Property: Troubleshooting Guide

The quickest regular expression match possible if it is already a subsection of another match