$(document).ready(function() { $(".bttnclick").on("click", function() { $(".game__feature__block").css("flex", "2"); }); }); .game__feature__block { transition: 1s; flex: 1; padding: 15px; border: 1px solid #e40e0e; background-position: 50% 0%; background-size: contain; background-repeat: no-repeat; box-shadow: 0 0 20px -4px #000, inset 0 0 0 5px #200607; text-align: center; overflow: hidden; } .game__feature__block:first-child { flex: 2; } .bttnclick{ background-color: blue; width: 100px; height: 20px; } <html> <link href="/style.css" rel="stylesheet" type="text/css"> <div class="container" style="display:flex;"> <div class="game__feature__block" > <h3 class="game__feature__title">RAIDS</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> <div class="game__feature__block"> <div> <h3 class="game__feature__title">RAIDS2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> </div> <div class="game__feature__block"> <div> <h3 class="game__feature__title">TRADINGPOST</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> </div> <div class="game__feature__block"> <div> <h3 class="game__feature__title">Presets</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> </div> </div> </html>Me gustaría que el "game__feature__block" se flexione: 2 al hacer clic en el elemento div azul. Y cuando se vuelve a hacer clic para volver al original y cuando se hace clic en otro elemento azul, este vuelve a su estado original. Tal vez necesito agregar una función onClick, pero creo que realmente no importa.
Prueba el siguiente código:
$(document).ready(function() { $(".bttnclick").on("click", function() { $(".game__feature__block").css("flex", "2"); }); }); .game__feature__block { display: flex; flex-direction:column; transition: 1s; flex: 1; padding: 15px; border: 1px solid #e40e0e; background-position: 50% 0%; background-size: contain; background-repeat: no-repeat; box-shadow: 0 0 20px -4px #000, inset 0 0 0 5px #200607; text-align: center; overflow: hidden; } .game__feature__block:first-child { flex: 2; } .bttnclick{ background-color: blue; width: 100px; height: 20px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="container" style="display:flex;"> <div class="game__feature__block" > <h3 class="game__feature__title">RAIDS</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> <div class="game__feature__block"> <div> <h3 class="game__feature__title">RAIDS2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> </div> <div class="game__feature__block"> <div> <h3 class="game__feature__title">TRADINGPOST</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> </div> <div class="game__feature__block"> <div> <h3 class="game__feature__title">Presets</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="bttnclick"></div> </div> </div> </div>El primer punto es que necesita un identificador único para cada cuadro para cambiar las propiedades. Cuando selecciona los componentes por una clase que coincide con muchos componentes, obtiene una matriz en lugar de un componente, por lo que tendría que revisar esta lista cambiando cada elemento.
Otro punto, le recomiendo que cree una clase y cambie la clase en lugar de cambiar el estilo. Por ejemplo:
.expandend_box { flex: 2; } $('.btnclick_1').on('click', () => { $('.game__feature__block_1').toggleClass('expanded_box'); });Es más recomendable manipular los estilos por clase que cambiarlos directamente.
O, si quieres mantener las clases, puedes intentarlo:
$('.game__feature__block').each((index, component) => { const button = $(component).find('.bttnclick'); button.on('click', () => { $(component).toggleClass('expanded_box'); }); })