i am trying to develop a preview to show banners. On my preview, I am using clickable tabs to choose. What I am trying to do?
I am trying to align the tabs on a single row where multiple tabs will be on one single line as well as two arrows on the left and right to navigate the tabs in order to choose.
This is my CSS for tabs
#tabs {
display: flex;
flex-wrap: wrap;
}
#tabs div {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
padding: 5px 10px 5px 10px;
/* margin-left: 2px; */
cursor: pointer;
transform-origin: center;
background-color: #6a6e94;
}
.active,#tabs div:hover {
box-shadow: 2px 2px 5px black;
background-color: var(--default_color)!important;
}
HTML
<div id="tabs">
#foreach ($data as $id => $row)
<div id="version{{$id}}" class="versions #if(Helper::getFeedbackStatus($id) == 1) active #endif">
{{ $i++ }}.{{ Helper::getFeedbackName($id) }}</div>
#endforeach
</div>
Yes the tabs are dynamic
And this is a sample that I am trying to overcome
What I am trying to do
I don't know where to start actually.
#tab-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
}
#tabs {
display: flex;
flex-wrap: wrap;
}
#tabs div {
width: 120px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
padding: 5px 10px 5px 10px;
cursor: pointer;
transform-origin: center;
background-color: #6a6e94;
flex-shrink: 0;
}
.active, #tabs div:hover {
box-shadow: 2px 2px 5px black;
background-color: var(--default_color)!important;
}
#left-arrow, #right-arrow {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
#left-arrow {
left: 0;
}
#right-arrow {
right: 0;
}
<div id="tab-container">
<div id="left-arrow">←</div>
<div id="tabs">
#foreach ($data as $id => $row)
<div id="version{{$id}}" class="versions #if(Helper::getFeedbackStatus($id) == 1) active #endif">
{{ $i++ }}.{{ Helper::getFeedbackName($id) }}</div>
#endforeach
</div>
<div id="right-arrow">→</div>
</div>
Related
There is one popup. Selected installments are displayed in this pop-up. The user can choose as many installments as he/she wants. Selected installments have a border bottom. But I don't want the last item to be border bottom. I tried many ways but failed.
html
<div className="installmentinfo__container only-desktop">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
z-index: 999;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
What i tried;
.column:last-child{
border-bottom: none;
}
.last-child{
border-bottom: none;
}
&:last-of-type {
border-bottom: none;
}
Use the last-of-type pseudo selector to remove the last item style
.column > div:last-of-type {
border-bottom:none;
}
For More Details https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
psuedo-lastchild is not the last child of a parent container rather last child of a class.so what i did was gave all three segments a same class of segments for targeting the border side of the css and id for other css that was different from each other.
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
/* position: absolute; */
background-color: white;
/* top: 210px; */
margin: auto;
/* transform: translateX(-280px); */
padding: 0.3em;
z-index: 999;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
}
.column {
display: flex;
flex-direction: column;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
/* border-bottom: 1.5px solid #d1d1d1; */
padding-bottom: 5px;
}
#installmentnumber {
float: left;
width: 50%;
}
#installmentdate {
width: 50%;
color: black !important;
}
#installmentamount {
width: 80%;
color: black !important;
font-weight: 100;
}
.segments{
border-bottom: 1.5px solid #d1d1d1;
}
.segments:last-child{
border-bottom: none;
}
<body>
<div class="installmentinfo__container only-desktop">
<div class="installmentinfo">
<div class="column">
<div class="segments" id="installmentnumber" >{(i+1).toString()}</div>
<div class="segments" id="installmentdate">{billDate}</div>
<div class="segments" id="installmentamount">{e.amount}{e.currency}</div>
</div>
</div>
</div>
</body>
In your snippet your are giving border bottom to .column class and then you are try to overwrite it with border none with :last-child selector instead you can do like this,
If your are thinking about repeating .column div then you can use following snippet
.column:not(:last-of-type){
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
In can you want to repeat .installmentinfo div multiple times and you want to give border bottom to column when .installmentinfo isn't a last div then you can use following snippet
.installmentinfo:not(:last-of-type) .column{
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
I am trying to make a simple demo li elements Which is horizontal center followed by Play or Pause button (see attached image ).I am able to make this using Flexbox properties. but facing few issue
Issue:
My li elements are moving or changing it position when I hover the Button.
conditions
we can't give hardcoded width to TEXT or hover text or PLAY or PAUSE .Text can be as big as possible ?
here is my code
https://jsbin.com/kobezulipe/edit?html,css,output
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play</span>
</div>
</div>
</div>
Attached expected output
Answer pic
It's moving because the flexbox in .abc justify-content: center. When the width of the button changes, everything moves to stay centered.
If you change that to start it will not move.
Alternatively, if you don't want the content to move and you want to keep it centered, and you can't use a hard-coded width, you can try using an overlay. It won't move when you hover, though it might cover up anything next to it:
add a second button next to the first one. remove the text from the original.
set this button to position: absolute so it's positioned above the layout. the parent is already position: relative
only display the overlay during .p:hover. Hide the original button with visibility: hidden so it keeps its width and height.
Example:
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
display: inline-flex;
}
.container, .overlay {
padding: 8px;
border: 1px solid;
align-items: center;
justify-content: center;
}
.overlay {
position: absolute;
left: 0;
top: 0;
flex-direction: row;
display: none;
transition: all 0.2s linear;
}
.p:hover .overlay {
display: inline-flex;
}
.p:hover .container {
visibility: hidden;
}
.text {
white-space: nowrap;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
overflow: visible;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
</div>
<div class="overlay">
<button class='button'>
</button>
<span class="text">Play, this can be very long</span>
</div>
</div>
</div>
</body>
With #kid-jokers answer you can add white-space: nowrap; to container div to allow words to span on one line.
var btn = document.querySelector(".button");
btn.addEventListener('click',function(){
btn.classList.toggle('paused');
document.querySelector(".button");
})
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: 52px;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: block;
white-space: nowrap;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play WHAM! - Jitterbug</span>
</div>
</div>
</div>
new answer: ↓
i rewrote the html. and the .p is positioned relative to the .list.
var btn = document.querySelector(".button");
btn.addEventListener("click", function () {
btn.classList.toggle("paused");
document.querySelector(".button");
});
li {
list-style: none;
}
.abc {
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list {
/* overflow: hidden; */
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
position: relative;
}
.list li {
width: 52px;
margin: 0 9px;
}
.list li button {
border: 1px solid #3a3631;
width: 52px;
}
.p {
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
/* left: 18px; */
margin-bottom: 0;
position: absolute;
right: -18px;
transform: translateX(100%);
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class="list">
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<div class="p">
<div class="container">
<button class="button"></button>
<span class="text">Play longer longer longer</span>
</div>
</div>
</ul>
</div>
hope it can help you。
you can change the .p {width: initial;} to .p {width: 52px;}
I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML.
Is there any way around/a hack to achieve this?
A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.
A:
B:
I tried using,
HTML
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>
CSS
select#payment-provider option[value="BitCoin"] {
background: url(/_assets/images/svg/BTC.svg) no-repeat right;
width: 22px;
height: 22px;
}
But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.
Will appriciate the help.
Thanks
Check the snippet below. I created a custom component using UL>LI.
var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');
placeholder.addEventListener('click', function() {
if(dropdown.classList.contains('active')) {
dropdown.classList.remove('active')
} else {
dropdown.classList.add('active')
}
})
.custom-select .dropdown {
list-style: none;
padding: 0;
display: none;
}
.dropdown .img-wrapper,
.placeholder .img-wrapper {
display: inline-block;
max-width: 30px;
}
.dropdown img,
.placeholder img {
max-width: 100%;
}
.placeholder {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
position: relative;
}
.placeholder::before,
.placeholder::after {
content: "";
display: inline-block;
height: 2px;
width: 10px;
background-color: #aaa;
position: absolute;
right: 0;
}
.placeholder::before {
transform: rotate(45deg);
right: 20px;
}
.placeholder::after {
transform: rotate(-45deg);
right: 15px;
}
.custom-select.active .placeholder::after {
right: 20px;
}
.custom-select.active .placeholder::before {
right: 15px;
}
.custom-select.active .dropdown {
display: flex;
flex-direction: column;
box-shadow: 1px 1px 6px 1px #ddd;
position: absolute;
top: 40px;
right: 0;
left: 0;
min-width: 200px;
}
.dropdown li {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
.dropdown li:hover {
box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}
.custom-select {
display: inline-flex;
flex-direction: column;
position: relative;
width: 100px;
}
input {
border: 0;
outline: none;
box-shadow: none;
width: 40px;
display: inline-block;
height: 30px;
text-align: right;
}
.wrapper {
display: inline-flex;
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 50px;
align-items: center;
}
.input-label {
position: absolute;
background-color: #fff;
top: -6px;
display: inline-block;
left: 10px;
padding: 0 5px;
color: #aaa;
}
<section class="wrapper">
<label for="" class="input-label">You Receive</label>
<input type="number" readonly value=".32" />
<div class="custom-select" id="custom-select">
<span id="placeholder" class="placeholder">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text"> BTC</span>
</span>
<ul class="dropdown" id="dropdown">
<li class="dd-item">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text">Bitcoin (BTC)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
</span>
<span class="text">Ethereum (ETH)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
</span>
<span class="text">Cardano (ADA)</span>
</li>
</ul>
</div>
</section>
I'm trying to add a text search field that will filter content. The code I have, however, will filter out literally anything that doesn't match, including parts of the <div> I want to include.
In other words, I want to have a text search that will search throughout the headers/titles of a series of <div>'s and then return the entire content of that <div> based on the title.
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Check out my fiddle: https://codepen.io/anon/pen/zQVreM
In the fiddle, try searching for "header" to see what happens. What I'd like to happen, is that the entire card is shown.
You don't need to use both toggle and filter.
You could hide all of the cards, filter out the ones that match, and show those only.
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
});
html {
scroll-behavior: smooth;
}
.now-content ul li:before {
background-image: none;
}
.pageFooter {
width: 100%;
background-color: #000;
}
.ddPageWrap {
min-height: 750px;
}
.grpContainer {
width: 95%;
margin: 20px auto 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.ddCard {
display: flex;
width: 100%;
box-sizing: border-box;
flex-direction: column;
flex: 0 0 100%;
margin: 1rem auto;
border: 1px solid #323232;
}
.ddCardHeader {
display: flex;
flex-direction: column;
margin-bottom: auto;
align-self: flex-start;
padding: .5em;
}
.ddCardFooter {
margin-top: auto;
display: block;
padding: .5em;
border-top: .5px solid #ccc;
}
.ddCardFooter p {
color: #626262;
font-size: 15px;
}
.fa-ul {
padding-left: 0 !important;
margin-left: 1em !important;
}
.fa-ul li {
color: #626262 !important;
font-size: 15px !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.ddCardContent {
padding: .5em;
}
.ddMoreInfo {
display: inline-block;
padding: 10px;
background-color: #0052e7;
margin-bottom: 10px;
border-radius: 5%;
border: 1px solid #0052e7;
cursor: pointer;
}
.ddMoreInfo a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.ddMoreInfo:hover {
background-color: #fff;
transition: .1s ease;
border: 1px solid #0052e7;
}
.ddMoreInfo:hover a {
color: #0052e7;
}
.ddBtn {
display: inline-block;
border: none;
outline: none;
padding: 12px 16px;
margin: 0.4em auto;
background-color: #f1f1f1;
cursor: pointer;
transition: all 0.2s;
}
.ddBtn:hover {
background-color: #ddd;
}
.ddBtn.active {
background-color: #666;
color: white;
}
#media all and (max-width: 800px) {
.ddBtn {
display: block;
margin: 0.4em auto;
width: 100%;
}
}
.ddToolTip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #0052e7;
cursor: pointer;
width: auto;
}
.ddToolTip .ddToolTipText {
visibility: hidden;
min-width: 240px;
background-color: black;
color: #fff;
border-radius: 5%;
left: 50%;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
line-height: 1.2;
font-size: 13px;
}
.ddToolTip .ddToolTipText::after {
content: "";
position: absolute;
top: 100%;
left: 30%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ddToolTip:hover .ddToolTipText {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
<div class="ddCard">
<div class="ddCardHeader">
<h3>Other Card</h3>
</div>
<div class="ddCardContent">
<p>More stuff</p>
<div class="ddMoreInfo">
Other info
</div>
<div class="ddCardFooter">
<p>Footer</p>
</div>
</div>
</div>
</div>
Here is an updated version of your script:
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer .ddCard").each(function() {
$(this).toggle(this.innerText.toLowerCase().indexOf(value) > -1)
});
});
});
It uses each instead of filter
It looks in the whole card for a matching text
It uses the innerText property to look for a match
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();
})
});
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();
})
});
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
}