HTML, CSS – Prevent button from moving up when clicked

September 27, 2023

I’m trying to create an accordion component and I came across a problem.

The problem is, the .accordion_button element moves up after being clicked on. I want to stay it to stay in the same spot.

How can I fix it? I tried to remove the padding of the .accordion_button element, and I changed the display type a few times but it still doesn’t work.

:root{
  --checked_color: #d3d3d3;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 16px;
}

body{
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  width: 400px;
}

input[type="checkbox"]{
  display: none;
}

.accordion_button{
  text-justify: justify;
  text-align: center;
  width: 100%;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 1em 4em;
  background-color: #3e3ec3;
  border-radius: 12px 12px 0 0;
  color: #fff;
}

.accordion_button > svg{
  position: absolute;
  right: 5px;
  color: #fff;
  height: 20px;
  transition: transform .5s ease;
}

input[type="checkbox"]:checked + .accordion_button > svg{
  transform: rotate(90deg);
  stroke: var(--checked_color);
}

input[type="checkbox"]:checked + .accordion_button{
  color: var(--checked_color); 
}

.accordion_content{
  display: none;
}

.accordion_content > h1{
  text-align: center;
  font-size: 1rem;
  padding: .2em;
}

input[type="checkbox"]:checked ~ .accordion_content{
  display: block;
  border-radius: 0 0 12px 12px;
}

.accordion_button,.accordion_content {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.335);

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="checkbox" id="accordion">
        <label for="accordion" class="accordion_button">
            <span>ITEM 1</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
              </svg>
        </label>
        <div class="accordion_content">
            <h1>Hello</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla harum maiores aperiam quo natus? Distinctio vitae officiis, maxime dolore nesciunt doloremque enim possimus unde nostrum eveniet! Ducimus unde nulla eos!</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

>Solution :

It moves, because you have the full body content centered on both axis. So if the height of the whole component increases, then that of course also changes the position within the body.

You can avoid that, by using visibility instead of display to hide/show the content. display: none removes an element completely – whereas visibility: hidden just hides it, but still keeps the space it requires reserved.

:root{
  --checked_color: #d3d3d3;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 16px;
}

body{
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  width: 400px;
}

input[type="checkbox"]{
  display: none;
}

.accordion_button{
  text-justify: justify;
  text-align: center;
  width: 100%;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 1em 4em;
  background-color: #3e3ec3;
  border-radius: 12px 12px 0 0;
  color: #fff;
}

.accordion_button > svg{
  position: absolute;
  right: 5px;
  color: #fff;
  height: 20px;
  transition: transform .5s ease;
}

input[type="checkbox"]:checked + .accordion_button > svg{
  transform: rotate(90deg);
  stroke: var(--checked_color);
}

input[type="checkbox"]:checked + .accordion_button{
  color: var(--checked_color); 
}

.accordion_content{
  visibility: hidden;
}

.accordion_content > h1{
  text-align: center;
  font-size: 1rem;
  padding: .2em;
}

input[type="checkbox"]:checked ~ .accordion_content{
  visibility: visible;
  border-radius: 0 0 12px 12px;
}

.accordion_button,.accordion_content {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.335);

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="checkbox" id="accordion">
        <label for="accordion" class="accordion_button">
            <span>ITEM 1</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
              </svg>
        </label>
        <div class="accordion_content">
            <h1>Hello</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla harum maiores aperiam quo natus? Distinctio vitae officiis, maxime dolore nesciunt doloremque enim possimus unde nostrum eveniet! Ducimus unde nulla eos!</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>