I'm facing a problem, of which I did not find tutorials clear enough on the internet so I could learn how to solve it, which apparently seems simple but I can not solve it. The problem is to get <select>
down when you click it. However, when I click on 1, all 3 go down:
As in the code below, I tried to change the class
to drop1,drop2
. I also changed in .css and .js, but I'm sure I did something wrong, just do not know where.
Style.css:
body {
background: #35414a;
}
.drop {
width: 20em;
margin: 5em auto;
font-family: pfs-bold;
color: #86919a;
text-transform: uppercase;
position: relative;
-webkit-transition: width 0.5s;
transition: width 0.5s;
will-change: width;
}
.drop .option {
padding: 1em;
cursor: pointer;
background-color: #333333;
}
.drop .option:not(.active) {
display: none;
opacity: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.drop.visible {
-webkit-animation: bounce 1s;
animation: bounce 1s;
width: 24em;
}
.drop.visible:before, .drop.visible:after {
border-color: #fff;
}
.drop.visible:before {
opacity: 0;
}
.drop.visible:after {
opacity: 1;
}
.drop.visible .option {
color: #fff;
display: block;
}
.drop.opacity .option {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
.drop.opacity .option:nth-child(0) {
-webkit-transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s;
transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s;
transition: opacity 0.5s 0s, transform 0.5s 0s;
transition: opacity 0.5s 0s, transform 0.5s 0s, -webkit-transform 0.5s 0s;
}
.drop.opacity .option:nth-child(1) {
-webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
transition: opacity 0.5s 0.1s, transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
}
.drop.opacity .option:nth-child(2) {
-webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
transition: opacity 0.5s 0.2s, transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
}
.drop.opacity .option:nth-child(3) {
-webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
transition: opacity 0.5s 0.3s, transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
}
.drop.opacity .option:nth-child(4) {
-webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
transition: opacity 0.5s 0.4s, transform 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
}
.drop.opacity .option:nth-child(5) {
-webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
transition: opacity 0.5s 0.5s, transform 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
}
.drop.opacity .option:nth-child(6) {
-webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
transition: opacity 0.5s 0.6s, transform 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
}
.drop.opacity .option:nth-child(7) {
-webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
transition: opacity 0.5s 0.7s, transform 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
}
.drop.opacity .option:nth-child(8) {
-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
transition: opacity 0.5s 0.8s, transform 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
}
.drop.opacity .option:nth-child(9) {
-webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
transition: opacity 0.5s 0.9s, transform 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
}
.drop.withBG .option {
-webkit-transition: background-color 0.1s;
transition: background-color 0.1s;
}
.drop.withBG .option:not(.placeholder):hover {
background-color: #5aafee;
}
.drop.withBG .option:not(.placeholder).active {
background-color: #5aafee;
}
.drop:after, .drop:before {
content: "";
position: absolute;
top: 1.5em;
right: 1em;
width: 0.75em;
height: 0.75em;
border: 0.2em solid #86919a;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.drop:before {
border-left: none;
border-top: none;
top: 1.2em;
}
.drop:after {
border-right: none;
border-bottom: none;
opacity: 0;
}
.mini-hack {
opacity: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
script.js
$(document).ready(function() {
$(".drop .option").click(function() {
var val = $(this).attr("data-value"),
$drop = $(".drop"),
prevActive = $(".drop .option.active").attr("data-value"),
options = $(".drop .option").length;
$drop.find(".option.active").addClass("mini-hack");
$drop.toggleClass("visible");
$drop.removeClass("withBG");
$(this).css("top");
$drop.toggleClass("opacity");
$(".mini-hack").removeClass("mini-hack");
if ($drop.hasClass("visible")) {
setTimeout(function() {
$drop.addClass("withBG");
}, 400 + options*100);
}
triggerAnimation();
if (val !== "placeholder" || prevActive === "placeholder") {
$(".drop .option").removeClass("active");
$(this).addClass("active");
};
});
function triggerAnimation() {
var finalWidth = $(".drop").hasClass("visible") ? 22 : 20;
$(".drop").css("width", "24em");
setTimeout(function() {
$(".drop").css("width", finalWidth + "em");
}, 400);
}
});
index.html
<div class="drop">
<div class="option active placeholder" data-value="placeholder">
Escolha o Serviço
</div>
<div class="option" data-value="wow">
Hour Boost
</div>
<div class="option" data-value="drop">
Commend Bot
</div>
<div class="option" data-value="select">
Report Bot
</div>
</div>
<div class="drop1">
<div class="option active placeholder" data-value="placeholder">
Choose wiseely
</div>
<div class="option" data-value="wow">
Wow!
</div>
<div class="option" data-value="drop">
So dropdown!
</div>
<div class="option" data-value="select">
Very select!
</div>
<div class="option" data-value="custom">
Much custom!
</div>
<div class="option" data-value="animation">
Such animation!
</div>
</div>
<div class="drop2">
<div class="option active placeholder" data-value="placeholder">
Choose wisely
</div>
<div class="option" data-value="wow">
Wow!
</div>
<div class="option" data-value="drop">
So dropdown!
</div>
<div class="option" data-value="select">
Very select!
</div>
<div class="option" data-value="custom">
Much custom!
</div>
<div class="option" data-value="animation">
Such animation!
</div>
</div>
Follow the example in Fiddle