Soy bastante nuevo en HTML, CSS y JS y sé que hago un proyecto para la escuela. Así que tengo una línea de tiempo con años y cada vez que haces clic en el año se expande un cuadro con información. Mi problema ahora es que siempre se expande a su ancho máximo, pero quiero que el div esté en una proporción específica. (probé la relación de aspecto pero no funcionó)
Aquí está el siguiente código
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>Así que aquí hay un ejemplo y quiero que use más alto que ancho, pero siempre usa todo el ancho.
Gracias ya!!