$(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>I would like the "game__feature__block" to flex:2 on the click of the blue div element. And when clicked again to get back to the original and when click other blue element this one reverts back to its original state. Maybe I need to add an onClick function but I think it doesn't really matter.
Try the following code:
$(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>The first point is that you need a unique identifier for each box to change the properties. When you select the components by a class that matches with many components you get an array instead of a component, so you would have to go through this list changing each element.
Another point, I recommend you create a class and toggle the class instead of changing the style. For example:
.expandend_box {
flex: 2;
}
$('.btnclick_1').on('click', () => {
$('.game__feature__block_1').toggleClass('expanded_box');
});
It's more recommended you manipulate the styles by class than change it directly.
Or, if you want to keep the classes, you can try it:
$('.game__feature__block').each((index, component) => {
const button = $(component).find('.bttnclick');
button.on('click', () => {
$(component).toggleClass('expanded_box');
});
})