How to prevent my container increasing in size when toggling?

user_14331059 0
Viewed 48

I'm trying to create a mobile version toggle question and answer list. However, when I toggle the display block and none, the size of the container increases even though I added extra padding at the end. Is there a way to prevent this white space from occurring at the bottom of the container?

 let question = document.querySelector(".question")
    let answer = document.querySelector(".dropdown-content")


    question.addEventListener("click", toggling)


    function toggling(){
    answer.classList.toggle("dropdown-display")
    }
    *{box-sizing: border-box}

    body{
    margin: 0;
    padding: 0;
    background-color: green;}

    .container{
    display: flex;
    flex-direction: column;
    align-items: center;}

    .dropdowns{
    border-radius: 1em;
    max-width: 40rem;
    background-color: white;
    padding: 4em 2em 15em 2em;
    margin-bottom: 5em;}


    .dropdown-function{
    width: 16.8rem;
    padding: 0;
    margin: 0;}

    .question{
    cursor: pointer;}


    .dropdown-content{
    display: none;}

    .dropdown-display{
    display: block;}
<div class = "container">

    
    <main class = "dropdowns">
      
        <div class = "dropdown-function">

            <h2 class = "question"> Question 1</h2>
     
            <p class = "dropdown-content"> Answer 1</p>

        </div>

        <div class = "dropdown-function">

            <h2 class = "question"> Question 2</h2>
     
            <p class = "dropdown-content"> Answer 2</p>

        </div>

    </main>


</div>

css html javascript
3 Answers

You should use visibility:hidden and visibility: visible as it will maintain the box-model. display:none completely removes the element as if it were not there (affecting the box) whereas visibility only hides the element

user_169152920

There are multiple ways you can overcome this.

Please note that display:none will remove the element from appearing and won't take any space thats where the problem occurs

Solution 1: Add position: relative to .dropdowns and add position:absolute; and give its position in x and y axis with top and left properties. But it ain't a pretty good solution tho.

let question = document.querySelector(".question")
let answer = document.querySelector(".dropdown-content")


question.addEventListener("click", toggling)


function toggling(){
answer.classList.toggle("dropdown-display")
}
*{box-sizing: border-box}

body{
margin: 0;
padding: 0;
background-color: green;}

.container{
display: flex;
flex-direction: column;
align-items: center;}

.dropdowns{
border-radius: 1em;
max-width: 40rem;
  position: relative;
background-color: white;
padding: 4em 2em 15em 2em;
margin-bottom: 5em;}


.dropdown-function{
width: 16.8rem;
padding: 0;
margin: 0;}

.question{
cursor: pointer;}


.dropdown-content{
display: none;}

.dropdown-display{
display: block;}

.dropdown-content {
  position: absolute;
  top: 120px;
  left: 35px;
}
<div class = "container">


<main class = "dropdowns">
  
    <div class = "dropdown-function">

        <h2 class = "question"> Question 1</h2>
 
        <p class = "dropdown-content"> Answer 1</p>

    </div>

</main>

Solution 2: Add opacity: 0; and visibility: hidden; for the dropdown-content and toggle it

let question = document.querySelector(".question")
let answer = document.querySelector(".dropdown-content")


question.addEventListener("click", toggling)


function toggling(){
answer.classList.toggle("dropdown-display")
}
*{box-sizing: border-box}

body{
margin: 0;
padding: 0;
background-color: green;}

.container{
display: flex;
flex-direction: column;
align-items: center;}

.dropdowns{
border-radius: 1em;
max-width: 40rem;
background-color: white;
padding: 4em 2em 15em 2em;
margin-bottom: 5em;}


.dropdown-function{
width: 16.8rem;
padding: 0;
margin: 0;}

.question{
cursor: pointer;}


.dropdown-content{
/*display: none;*/
  opacity:0;
  visibility: hidden;
  transition: .4s ease all;
}

.dropdown-display{
/*display: block;*/
  opacity: 1;
  visibility: visible;
}
<div class = "container">


<main class = "dropdowns">
  
    <div class = "dropdown-function">

        <h2 class = "question"> Question 1</h2>
 
        <p class = "dropdown-content"> Answer 1</p>

    </div>

</main>

By this way you can add cool transitions tho. I'd recommend this way to go.

user_98800900

Try replacing display with visibility instead.

let question = document.querySelector(".question")
let answer = document.querySelector(".dropdown-content")

question.addEventListener("click", toggling)

function toggling() {
  answer.classList.toggle("dropdown-display")
}
* {
  box-sizing: border-box
}

body {
  margin: 0;
  padding: 0;
  background-color: green;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dropdowns {
  border-radius: 1em;
  max-width: 40rem;
  background-color: white;
  padding: 4em 2em 15em 2em;
  margin-bottom: 5em;
}


.dropdown-function {
  width: 16.8rem;
  padding: 0;
  margin: 0;
}

.question {
  cursor: pointer;
}

/* These are the changes */
.dropdown-content {
  visibility: hidden;
}

.dropdown-display {
  visibility: visible;
}
<div class="container">
  <main class="dropdowns">
    <div class="dropdown-function">
      <h2 class="question"> Question 1</h2>
      <p class="dropdown-content"> Answer 1</p>
    </div>
  </main>
</div>

user_140317940
Related