Develop Reference

Div doesn't work when it's added more than once

I am using this code to create a gift box and it works fine when there is only one box.
However, when I add a new gift box next to the current one horizontally, I can see the added one but I am unable to open it. Gift boxes seem to work as intended until a user tries to open the added box/boxes.
How can I fix this?
Thanks for your time!
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementById("present");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
present.addEventListener("click", function(e) {
present.classList.toggle("open");
}, false);
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

Coderman was close, but there is not a singular form of GetElementsByClassName in Javascript.
You need to iterate over all of the instances of the class and add a handler to each of them.
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementsByClassName("present-box");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
for (var i = 0; i < present.length; i++) {
present[i].addEventListener("click", function(e) {
this.classList.toggle("open");
}, false);
}
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present2">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

Vanilla Javascript custom select box for multiple field

var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
float:left;
margin-right:30px;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font: normal 40px/1.4 'Pacifico', sans-serif;
text-align: center;
color: #2980B9;
}
.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-webkit-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
-moz-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-webkit-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
-moz-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<div class="container">
<input type='text' id='input-field1' value='' />
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
Select Item <i class="icon-arrow"></i>
</a>
<ul class="dropdown-menu">
<li>option One</li>
<li>option Two</li>
<li>option Three</li>
<li>option Four</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<input type='text' id='input-field2' value='' />
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
Select Item <i class="icon-arrow"></i>
</a>
<ul class="dropdown-menu">
<li>option One</li>
<li>option Two</li>
<li>option Three</li>
<li>option Four</li>
</ul>
</li>
</ul>
</div>
I am trying to make a select box using li as select box but it doesn't work well in all browsers. I want to select an option and option value will be stored in a input box which we can make hidden using CSS. But the problem is how can I select an option from drop down list and store the value to the input box and also need to replace "Select Item" text with option text. And also need to work it on multiple field.

You just need to add event listeners to the anchor element clicks and, in the handler, you need to change the value of their relevant input element. To do this, I recommend adding another attribute like data-associated-input which can tell your event handler code exactly which input element a particular input option should modify. The following is an example of those ideas implemented:
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
function setupListeners(){
/* get all dropdown options */
var ulMenus = document.getElementsByClassName("dropdown-menu");
for(var i=0;i<ulMenus.length;i++){
var opts = ulMenus[i].getElementsByTagName('a');
for(var x=0; x<opts.length;x++){
/* add listener */
opts[x].setAttribute("onclick", "updateHidden(this);return !1;");
opts[x].setAttribute("onClick", "updateHidden(this);return !1;"); /* Support old browser that don't recognize all lowercase html */
}
}
}
function updateHidden(ele){
if(!ele)
return false;
var eleHidden = document.getElementById(ele.getAttribute("data-associated-input"));
if(eleHidden){
eleHidden.value = ele.getAttribute("data-optvalue");
}
}
setupListeners();
.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
float:left;
margin-right:30px;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font: normal 40px/1.4 'Pacifico', sans-serif;
text-align: center;
color: #2980B9;
}
.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-webkit-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
-moz-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-webkit-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
-moz-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<div class="container">
<input type='text' id='input-field2' value='' />
<ul>
<li class="dropdown">
Select Item <i class="icon-arrow"></i>
<ul class="dropdown-menu">
<li>option One</li>
<li>option Two</li>
<li>option Three</li>
<li>option Four</li>
</ul>
</li>
</ul>
</div>

IE11 3d transformations and perspective

I have created a 3d block that I am animating with tweenmax. I know that IE doesn't support transform-style: preserve-3d so you need to move it to the child, but because there are multiple blocks (more than the example) it doesn't really work especially when using the js to tween them.
My question is there a way to preserve the 3d using javascript for Internet Explorer?
http://jsfiddle.net/ktcle/mhca1k10/2/
.box {
display: block;
width: 180px;
height: 60px;
position: relative;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
outline: 1px solid transparent;
}
.box::before,
.box::after,
.box i,
.box i::before,
.box i::after,
.box b {
content: '';
display: block;
position: absolute;
}
.box::before {
background: red;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
}
.box::after {
background: pink;
width: 60px;
height: 60px;
-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
}
.box i {
background: green;
width: 180px;
height: 60px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-ms-transform: translate3D(0, 0, 0px);
-webkit-transform: translate3D(0, 0, 0px);
transform: translate3D(0, 0, 0px);
}
.box i::before {
background: purple;
width: 180px;
height: 60px;
-ms-transform: rotate(180deg) translate3D(0, 0, -60px);
-webkit-transform: rotate(180deg) translate3D(0, 0, -60px);
transform: rotate(180deg) translate3D(0, 0, -60px);
}
.box i::after {
background: orange;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
transform: rotateX(90deg) translate3D(0px, -30px, -30px);
}
.box b {
background: silver;
width: 180px;
height: 60px;
-ms-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
-webkit-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
transform: rotateX(90deg) translate3D(0px, -30px, 30px);
}

Can't get this JavaScript to work on my dropdown menu

still working on that Dropdown menu. It's working for the most part, but I need to apply the same effect (closed when it loads, open upon click) to apply to the nested <ul>'s. I've tried a whole bunch of stuff, currently I tried applying the same script to the nested <ul> as I applied to the initial <ul>, but it does nothing. It opens as uncollapsed and does not respond correctly when clicked on. Am I doing something wrong?
Here's my code:
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown, 0);
dropdownArray.forEach(function (el) {
var button = el.querySelector('a[data-toggle="dropdown"]'), menu = el.querySelector('.dropdown-menu'), arrow = button.querySelector('i.icon-arrow');
button.onclick = function (event) {
if (!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
} else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
});
Element.prototype.hasClass = function (className) {
return this.className && new RegExp('(^|\\s)' + className + '(\\s|$)').test(this.className);
};
#charset "utf-8";
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: normal;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: black;
background: #E6E6E6;
-moz-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
-webkit-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #C0C0C0;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .dropdown-menu li ul li {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 0px 0px;
text-decoration:none;
font-size:80%;
}
.dropdown .dropdown-menu li ul li a{
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
text-decoration:none;
}
.dropdown .dropdown-menu li ul li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
#keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
#-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
<!DOCTYPE html><html class="">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="dropstyle.css"/>
</head>
<body>
<div class="container">
<h1 class="title">Dropdown Menu</h1>
<ul>
<li class="dropdown">
Ga naar... <i class="icon-arrow"></i>
<ul class="dropdown-menu">
<li>Webdesign
<ul>
<li>Website</li>
<li>CMS</li>
<li>Portfolio</li>
</ul>
</li>
<li>Verkoop
<ul>
<li>Computers & laptops</li>
<li>Bullguard anti-virus & backup</li>
</ul>
</li>
<li>Reparatie</li>
<li>Google diensten
<ul>
<li>Adwords</li>
<li>Drive</li>
</ul>
</li>
<li>Glasvezel
<ul>
<li>Introductie</li>
<li>Waarom</li>
<li>Techniek</li>
<li>Aanmelden</li>
</ul>
</li>
<li>Nieuws</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
<script src="dropscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body></html>

Try adding the dropdown, dropdown-menu classes to the sub dropdown structures too, and also include the arrow there too. It seems like it's missing. So now this is happening:
You get only the first li in the beginning.
You query only the first a in it, and only the first ul.
Thus you handle the clicks and dropdowns only at first level.
Here is your updated fiddle: http://jsfiddle.net/gdna2ncq/1/

Flipping is not working in IE & Firefox in asp.net

I have chart with flippers. it means front portion(z-index: 2) will be text and back portion will be chart.
if i mouse over the front, then back portion chart will be displayed(working chrome). But the same is not working IE & Firefox.
Please see the attached pic & code snippet, how to solve this?
I appreciate your help.
Thanks.
Flipper.css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
/*border: 1px solid #ccc;*/
border: none;
height: auto;
width: 100%;
display: inline-block;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
height: auto;
width: 100%;
padding: 0px;
margin: 0px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
border: none;
}
.front .name {
font-size: 2em;
display: inline-block;
font-family: Arial, Verdana, Helvetica, sans-serif;
border-radius: 5px;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
background-color: #cef8ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cef8ff), to(#7fe0f8));
background-image: -webkit-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -moz-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -ms-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: -o-linear-gradient(top, #cef8ff, #7fe0f8);
background-image: linear-gradient(to bottom, #cef8ff, #7fe0f8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cef8ff, endColorstr=#7fe0f8);
}
<div id="FlipMainId" class="flip-container" runat="server" style="height: 330px">
<div id="Card1" class="flipper" runat="server">
<div id="Card1Front" class="front" runat="server">
<span class="name" style="height: 325px;">
<table id="HCWF_Front" runat="server" border="0" style="text-align: center">
<tr>
<td>
<br />
<asp:Label ID="FrontLabel1" runat="server" Text="FrontLabel1" CssClass="FlipperheaderLabel"></asp:Label>
</td>
</tr>
<tr>
<td style="color: #777777; font-size: 12px; font-weight: normal; font-style: italic">
<asp:Label ID="FrontLabel2" runat="server" Text="FrontLabel2" CssClass=""></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel3" runat="server" Text="FrontLabel3" CssClass="FlipperLine1Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel4" runat="server" Text="FrontLabel4" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel5" runat="server" Text="FrontLabel5" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="FrontLabel6" runat="server" Text="FrontLabel6" CssClass="FlipperLine2Label"></asp:Label>
</td>
</tr>
</table>
</span>
</div>
<div id="Card1Back" class="back" runat="server" style="height: 330px">
<table width="100%" border="0" runat="server">
<tr>
<td align="right">
<Buttons...../>
</td>
</tr>
<tr>
<td>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"
Height="300">
</telerik:RadHtmlChart>
</td>
</tr>
</table>
</div>
</div>
</div>

I fixed this issue
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/*border: 1px solid #ccc;*/
height: auto;
width: 100%;
}
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: none;
}
.front .name {
font-size: 2em;
display: inline-block;
font-family: helvetica, times, serif;
padding-top: 10px;
border-radius: 5px;
height: 100%;
width: 100%;
position: absolute;
-webkit-transform: rotate(-0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
background-color: #cef8ff;
}