How to prevent my container increasing in size when toggling?-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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>