I adjusted the length of the box to 0, but now I want it to change to a different value when the button is pressed. However, the current code does not seem to be working as intended:
.down button:focus .info {
height: 200px;
}
For more clarity, please refer to the images and accompanying code below. My goal is to trigger a click action that will adjust the length of the box to another value upon pressing the button. View image here View image here
@charset "utf-8";
* {
padding: 0px;
margin: 0px;
box-sizing: border-box
}
body {
background-color: #d4d4d4;
}
section {
width: 90%;
background-color: #ffffff;
margin: 100px auto;
height: 560px;
}
.box {
width: 80%;
margin: 0 auto;
}
.title {
text-align: center;
padding: 10px 0;
}
.info {
text-align: center;
height: 0;
overflow: hidden;
}
.down {
margin: 0 auto;
margin-top: 30px;
width: 50px;
}
.down button {
width: 50px;
padding: 10px 10px 10px 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 6px #bbb;
height: 50px;
border: none;
position: relative;
}
.down button:focus .info{
height: 200px;
}
.down img {
width: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>COMSEC</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div class="box">
<div class="title">
<h1>Title <br>
</h1>
</div>
<div class="info">
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT<br> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br> TEXT TEXT ...
</p>
</div>
<div class="down">
<button><img src="down.png" alt="Button"></button>
</div>
</div>
</section>
</body>
</html>