javascript - how do i show a div on clicking another div and hide it on clicking that same div?

Question

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

标签： javascripthtmlcss

Answer 1

我不确定这里的特定 div一词。也许您可以尝试使用toggle(). 您在包装选择器时也有语法错误：

$(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>