Increase the size of flex item on button click

I want to add a feature such that when I click the flex-item it must expand to size of complete row below it. Like basically increase it's size when I click on it, and get back to previous size when I click it again.

The subsequent elements must remain of same size and be shifted to next row after the expanded clicked flex-item and follow the same properties of flex-box. The flex-items must be clickable elements which expand on click and get back to same size on another click.

I am not able to figure this out and I am new to front-end technologies.

$('#clickMe').click(function() {
    $('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
    $(this).insertAfter($('[class^="flex-item"]').last());
});
.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    margin-right: 15px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
ul li{
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>

Answers 1

  • You can toggle class on click.

    var i = 1; // just for differentiate divs
    $('#clickMe').click(function() {
        $('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar-'+i));
        $(this).insertAfter($('[class^="flex-item"]').last());
        i++
    });
    
    $(document).on('click', '.flex-item' ,function(){
      $(this).toggleClass('flexActive')
    })
    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        -webkit-flex-direction: row; /* Safari */
        flex-direction:  row;
        flex-wrap:  wrap;
    }
    .flex-item {
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;
        margin-right: 15px;
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        display: inline-block;
        
    }
    ul li{
      display: inline;
    }
    .flexActive{
      width:auto;
      display:block;
      flex: 1 1;
      margin-right:0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul id="Demosss" class="flex-container">
    <!-- add LI here -->
    </ul>
    
    
    <button id="clickMe">Click Me</button>


Related Articles