Brtdku

i have a div with 7 children, on hover an item changes background and text pads left from center. I've done that with CSS.
now i want when the user clicks on an item it shows another div (.wrapper) with JavaScript. if the user click again it hides the particular div.
how can i achieve this logic with JavaScript?

here is my html snippet

<div class="category">

    <div class="furniture">Furniture</div>

    <div class="tableware">Tableware</div>

    <div class="jewellery">Jewellery</div>

    <div class="shoes">Shoes</div>

    <div class="water_bottles">Water Bottles</div>

    <div class="clothes">Clothes</div>

    <div class="textiles">Fabric Patterns</div>

</div>



<div class="upload">

    <div class="wrapper">

        <div class="control"><img src="back.png"></div>

            <div class="content"></div>

            <div class="content_desc"></div>

            <div class="control"><img src="forward.png"></div>

        </div>

    </div>

CSS code

/*styles individual divs in the category class*/

.category > div:hover {

    cursor: pointer;

    transform-style: flat;

    animation-delay: 0.1s;

    display: flex;

    border: 1px 1px 1px 1px solid;

    background-color: #898488;

    color: #7AC4EE;

    border-left-color: yellow;

    box-sizing: border-box; 

}

/*class that i want to display on click*/

.wrapper {

    display: none;

    flex-wrap: wrap;

    justify-content: space-between;

    background-color: white;

    box-sizing: border-box;

    width: 623px;

    padding: 0;

    align-self: center;

    height: 100%;

    margin-bottom: auto;

    box-shadow:  0px 3px 7px 0px rgba(0,0,0,0.3);

}

/*the classes below are in .wrapper*/

.control {

   flex: 1;  

   background:white; 

   position: relative;

}



.content {

   flex: 4;

   height: 92%;

   width: 415px;

   margin-top: 5px;

   margin-bottom: 5px;

   background: lightblue;

   position: relative;

}

.content_desc {

   flex: 2;

   height: 22px;

   width: 415px;

   margin-top: 370px ;

   margin-left: 104px;

   margin-right: 98.5px;

   background-color: white;

   border: 0.3px solid;

   position: absolute;

}



.control img {

   position: absolute;

   left: 50%;

   top: 50%;

   height: 40px;

   width: 40px;

   background: white;

   box-sizing: border-box;

   transform: translate(-50%, -50%);

}

.control img:hover {

   cursor: pointer;

   background-color: yellow;

   transition-delay: 0.2s;

   animation: 0.1s ease-in;

}

JavaScript

$(document).ready(function() {

  $('.category' > div ).on('click', function(){

  $('.wrapper').show();

  })

});

use this code

$(document).ready(function() {

      $('.category>div' ).on('click', function(){

     $('.wrapper').toggle();

      })

    });

and add this css to hide div in starting

.wrapper{

display:none

}

I am not sure about the term particular div here. May be you can try with toggle(). You also have syntax error in wrapping the selector:

$(document).ready(function() {

  $('.category > div').on('click', function(){

    $('.wrapper').toggle();

  })

});

/*styles individual divs in the category class*/

.category > div:hover {

    cursor: pointer;

    transform-style: flat;

    animation-delay: 0.1s;

    display: flex;

    border: 1px 1px 1px 1px solid;

    background-color: #898488;

    color: #7AC4EE;

    border-left-color: yellow;

    box-sizing: border-box; 

}

/*class that i want to display on click*/

.wrapper {

    display: none;

    flex-wrap: wrap;

    justify-content: space-between;

    background-color: white;

    box-sizing: border-box;

    width: 623px;

    padding: 0;

    align-self: center;

    height: 100%;

    margin-bottom: auto;

    box-shadow:  0px 3px 7px 0px rgba(0,0,0,0.3);

}

/*the classes below are in .wrapper*/

.control {

   flex: 1;  

   background:white; 

   position: relative;

}



.content {

   flex: 4;

   height: 92%;

   width: 415px;

   margin-top: 5px;

   margin-bottom: 5px;

   background: lightblue;

   position: relative;

}

.content_desc {

   flex: 2;

   height: 22px;

   width: 415px;

   margin-top: 370px ;

   margin-left: 104px;

   margin-right: 98.5px;

   background-color: white;

   border: 0.3px solid;

   position: absolute;

}



.control img {

   position: absolute;

   left: 50%;

   top: 50%;

   height: 40px;

   width: 40px;

   background: white;

   box-sizing: border-box;

   transform: translate(-50%, -50%);

}

.control img:hover {

   cursor: pointer;

   background-color: yellow;

   transition-delay: 0.2s;

   animation: 0.1s ease-in;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="category">

    <div class="furniture">Furniture</div>

    <div class="tableware">Tableware</div>

    <div class="jewellery">Jewellery</div>

    <div class="shoes">Shoes</div>

    <div class="water_bottles">Water Bottles</div>

    <div class="clothes">Clothes</div>

    <div class="textiles">Fabric Patterns</div>

</div>



<div class="upload">

    <div class="wrapper">

        <div class="control"><img src="back.png"></div>

            <div class="content"></div>

            <div class="content_desc"></div>

            <div class="control"><img src="forward.png"></div>

        </div>

    </div>

You made a mistake in your css selector, it's not '.category' > div, it should be '.category > div'

$(document).ready(function() {

  $('.category > div').on('click', function(){

    $('.wrapper').toggle();

  })

});