How to flex element on onClick Event-CodePudding

$(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  style="display:flex;">
  <div  >

      <h3 >RAIDS</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
  </div>
  <div >

    <div>
      <h3 >RAIDS2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
    </div>
  </div>
  <div >

    <div>
      <h3 >TRADINGPOST</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
    </div>
  </div>
  <div >
    <div>
      <h3 >Presets</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></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.

CodePudding user response：

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  style="display:flex;">
  <div  >

      <h3 >RAIDS</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
  </div>
  <div >

    <div>
      <h3 >RAIDS2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
    </div>
  </div>
  <div >

    <div>
      <h3 >TRADINGPOST</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
    </div>
  </div>
  <div >
    <div>
      <h3 >Presets</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

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');
  });
})