I'm pretty new to HTML, CSS and JS and right know I do a project for school. So I have a timeline with years on it and everytime you click on the year a box expands with information in it. My problem now is that it always expand to its max-width but I want that the div is in a specific ratio. (tried aspect-ratio but didnt work)
Here is the following code
JS:
$('.box2').each(function() {
var $this = $(this);
function toggleActive() {
$('.bigbox2').toggleClass('bigbox2').children('.content');
}
$this.click(function() {
if (!$(this).hasClass('bigbox2') ) {
toggleActive();
}
$this.toggleClass('bigbox2').children('.content');
})
}) body {
margin: 0;
background: #222;
font-family: Impact;
}
.row2 {
width: 100%;
display: flex;
flex-direction: column;
justify-content: left;
gap: 50px;
position:absolute; top:10px;left:5px;
}
.box2 {
position: relative; left: 50px;
overflow: hidden;
border-radius: 30px;
background: white;
padding: 10px;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
max-height: 25px;
max-width: 55px;
transition-duration: 200ms;
transition-delay: 1ms;
transition: max-width 0.5s ease 0s, max-height 0.5s ease 0s;
transition-timing-function: ease;
}
.box2.bigbox2 {
max-width: 700px;
max-height: 1000px;
}
.box2 h2 {
margin-top: 0px;
text-align: right;
}<div class="right"></div>
<div class="line"></div>
<div class="row2">
<div class="box2">
<h2 class="title">2010</h2>
<div class="content">
<div>
<p>sjdfhasjdfsjkfhs dsdfh asjkdfhasjkdf hsajkdfhasdkjfhaskjfd hasjfd hasjfkhaslkdfjashkdjfhasfkjh sdjkf
hasjkfhsajkfhsakfhasjkdfhasjkdfasjkfahsfjk asj hsaj hasdj fhasjkdf hasjk hfsakjfhasklfhaslfkjashdfjksadhfjsahfjsjkfafhsdfjkalsfh
as sajfsjk</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>So here is an example and I want like that it uses more height than width, but its using always so whole width.
Thanks already!!