Develop Reference

multi-range slider with html5 input range in Angular 4

If you are using Angular 4, you are probably suffering if you need to use a range slider. Most of the packages available are for AngularJS or Angular 2 that doesn't work flawless.
So, I'm trying to build up a cross browser multiple range slider with native html5 input ranges. However, when it comes to IE and Edge, it seems there is a little issue understanding the pointer events for pseudo elements and it doesn't work.
Although I'm using Angular 4, I just created a JSFiddle in AngularJS as an example as I believe this is more a CSS issue maybe with a Javascript workaround.
I appreciate your help. Thanks,
#filter .slider_container{
display: block;
width: 99.5%;
background-color: rgba(0,0,0,0);
height: 15%;
min-height: 85px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0);
margin-top:1px;
border-bottom: 1px solid gray;
}
#filter .slider_container p{
font-weight: 300;
margin-left: 5%;
font-size: 0.8em;
text-align: center;
display: block;
margin:0;
margin-bottom: 15px;
color: #000000;
}
#filter .slider_container p:nth-of-type(1){
font-weight: 500;
font-size: 0.8em;
margin-bottom: 0;
padding-top:10px;
}
#filter .slider_container .gender{
outline: 0;
background: #ffffff;
border: 1px solid #000000;
color: #000000;
width: 45%;
height: 20px;
max-width: 150px;
border-radius: 20px;
margin: 0.8%;
cursor: pointer;
font-size: 0.65em;
}
#filter .slider_container .gender:focus{
outline: 0;
}
#filter .slider_container .gender:hover{
background-color: #EA0A8A;
background-image: -webkit-linear-gradient(#EA0A8A, #ec5aae);
background-image: -moz-linear-gradient(#EA0A8A, #ec5aae);
background-image: -o-linear-gradient(#EA0A8A, #ec5aae);
background-image: linear-gradient(#EA0A8A, #ec5aae);
/*text-shadow: 1px 1px 2px black , 0 0 25px black , 0 0 5px black;
-webkit-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.75);*/
cursor: pointer;
color: #ffffff;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
-moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.30);
border: 0px solid #ffffff;
}
#filter .slider_container .active{
background: #EA0A8A;
color: #ffffff;
border: 0px solid #ffffff;
}
#filter input[type=range]{
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 80%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
margin-left: 10%;
}
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
#filter input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
#filter input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
/* Special styling for WebKit/Blink */
#filter input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for Firefox */
#filter input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 3vh;
width: 3vh;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -4px;
}
/* All the same stuff for IE */
#filter input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 15px;
width: 15px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
max-height: 15px;
max-width: 15px;
border-radius: 100%;
margin-top: -3px;
}
#filter input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 0px solid #010101;
}
#filter input[type=range]:focus::-webkit-slider-runnable-track {
background: none transparent;
}
#filter input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: none transparent;
border-radius: 1.3px;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[type=range]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
z-index: -9;
border: 20px solid #FFFFFF;
margin: 0;
}
#filter input[name='distanceslider']::-ms-fill-lower {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-lower {
background: #EA0A8A;
}
#filter input[name='distanceslider']::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter input[name='distanceslider']:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .ghost{
position: absolute;
z-index:1;
pointer-events: none;
}
#filter .ghost::-webkit-slider-thumb{
z-index:1;
pointer-events: all;
}
#filter .ghost::-moz-range-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-ms-thumb {
z-index:1;
pointer-events: all;
}
#filter .ghost::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost:focus::-webkit-slider-runnable-track {
z-index: -10;
pointer-events: none;
}
#filter .ghost::-moz-range-track {
z-index: -10;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-track {
z-index: -40;
pointer-events: none;
visibility: hidden;
}
#filter .ghost::-ms-fill-lower {
background: none transparent;
border: 0px solid #010101;
border-radius: 2.6px;
visibility: hidden;
z-index: -9;
}
#filter .ghost:focus::-ms-fill-lower {
background: none transparent;;
}
#filter .ghost::-ms-fill-upper {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .ghost:focus::-ms-fill-upper {
background: #c5c5c5;
}
#filter .main{
position: absolute;
z-index: 0;
pointer-events: none;
}
#filter .main::-webkit-slider-thumb{
z-index: 0;
pointer-events: all;
}
#filter .main::-moz-range-thumb {
z-index: 0;
pointer-events: all;
}
#filter .main::-ms-thumb{
z-index: 1;
pointer-events: all;
}
#filter .main::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main:focus::-webkit-slider-runnable-track {
z-index: -11;
pointer-events: none;
}
#filter .main::-moz-range-track {
z-index: -11;
border: 0px solid #FFFFFF;
pointer-events: none;
height: 15px;
}
#filter .main::-ms-track {
z-index: 0;
pointer-events: none;
}
#filter .main::-ms-fill-lower {
background: #c5c5c5;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-lower {
background: #c5c5c5;
}
#filter .main::-ms-fill-upper {
background: #EA0A8A;
border: 0px solid #010101;
border-radius: 2.6px;
}
#filter .main:focus::-ms-fill-upper {
background: #EA0A8A;
}
https://jsfiddle.net/guarinex/00Lh7kfd/28/

How to style drop down list for Ajax / jQuery results

I'm using ajax and jquery UI to search and select in the input field. How can I style the drop down thing to not to show me <ul> bullets and also have a white background? I have been trying to target the search field using ID but it changes the input box and not the drop down box. I'm attaching the screenshot here.

A css solution
change the list style type on you li tags to none. and add a white background to your ul tag
li {
list-style-type: none
}
ul {
background: white;
}
<ul>
<li>Option</li>
</ul

If someone like me is struggling with jQuery UI stylying for Ajax calls, here is bootstrap code which I'm copy pasting from a blog and it is working perfectly for me.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}

get appended values to be noticed by document.ready function

Is there a way for a document.ready function to notice an append function when the page has already been rendered?
Below is the document.ready function along with code snippet. Tried a few different things for example window.onload and still no fix
jQuery(document).ready(function() {
var index = 1;
var testNum =1;
var slideLen = $('.slide-container').length;
$('.slide-thumb').click(function (event) {
var slideNum = $(this).attr('data-slide');
var el = $('.slide-container[data-slide=' + slideNum + ']');
index = slideNum;
$(el).addClass('show-slide');
$(el).siblings('.slide-container').removeClass('show-slide');
$(this).siblings('.slide-thumb').removeClass('show-slide-thumb');
$(this).addClass('show-slide-thumb');
});
function autoSlide() {
timer = setInterval(function () {
if (index >= slideLen) {
index = 0;
}
$('.slide-thumb[data-slide=' + ++index + ']').click();
testNum++;
}, 6000);
}
autoSlide();
});
function showDetails(elementID) {
$('.details-container').addClass('show');
$('.top-section').append(
'<span id="car_name" style="font-size:2em">' + obj[0].make + '</span>' +
'<span id="car_price" style="float:right;font-size:2em;font-weight: bold;color:#23F4ED;" >' + '¢' + obj[0].price + '</span>'
);
$('.slide').find('.slide-container').remove();
$('.slide').append
(
'<li class="slide-container show-slide" id="sl" data-slide="1"><div class="slide-image" style=" background:url(' + obj[0].image + '); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>'
+
'<li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url('+obj[0].image2+'); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>'
);
$('.thumbs').find('.slide-thumb').remove();
$('.thumbs').append
(
'<li class="slide-thumb show-slide-thumb" id="hit" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>'
+
'<li class="slide-thumb" id="hit" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>'
);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
font-weight: 300;
-webkit-font-smoothing: antialiased
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
p {
margin-bottom: 20px;
line-height: 2;
font-size: 1rem;
font-weight: 300;
}
html {
background-color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
body {
width: 100vw;
font-family: 'open sans', sans-serif;
font-size: 100%;
font-weight: 300;
color: #212121;
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-font-smoothing: antialiased
}
header {
width:inherit;
}
.menu-bar{
height:70px;
width:100%;
background: #02243E;
}
.menu-bar .section-container{
padding: 0px;
display: table;
}
.logo-container{
display: inline-block;
vertical-align: top;
height: 70px;
}
.logo-container h1{
margin-top: 20px;
color: #40C2F1;
}
.menu-container{
float: right;
display: inline-block;
height: 70px;
}
.menu{
width: inherit;
height: inherit;
vertical-align: middle;
display: table-cell;
}
.logo{
display: flex;
height:55px;
font-size: 1.5rem;
justify-content: flex-start;
}
.menu ul{
display: flex;
justify-content: flex-end;
color: #40C2F1;
list-style-type: none;
}
.menu-item{
margin-left: 40px;
}
.banner-wrap{
height:50vh;
background: #D6D6D6;
width: inherit;
}
.section-title{
width:100%;
text-align: center;
margin-bottom:25px;
color:
}
.mini-section-title{
width:100%;
text-align: center;
margin-bottom:25px;
}
.content-text{
color:#95989A;
padding: 0px 25px;
}
.section-container{
padding:50px 0px;
width: 90vw;
max-width: 1250px;
margin: 0 auto;
height:inherit;
}
.content-area{
vertical-align: top;
width: 75%;
display: inline-block;
height: auto;
}
.side-content{
width: 24%;
height: auto;
display: inline-block;
}
.welcome-section{
height:auto;
}
.welcome-section .section-title{
color: #40C2F1;
}
.categories-section{
height:auto;
border: 1px solid #C9CACA;
background: #F8FAFC;
}
.categories-section .mini-section-title{
color: #3F3F3F;
}
.contact-section{
height:300px;
width: inherit;
background: #40C2F1;
display: table;
}
.contact-section .innerwrap{
color:white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.submit-button{
width:auto;
padding:20px 40px;
color:white;
border:none;
border-radius:5px;
background:#23F4ED;
}
.category-wrap{
width: auto;
}
.category-card{
cursor: pointer;
margin: 25px 10px;
display: inline-block;
border-radius: 5px;
width: 27vw;
max-width: 393px;
height: 25vw;
max-height: 393px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.cat-icon-wrap{
display:table;
width: 100%;
height:75%;
border-bottom: 1px solid #C9CACA;
}
.cat-icon{
display:table-cell;
vertical-align: middle;
}
.cat-img{
margin:0 auto;
width:45%;
height:56.25%;
background: black;
}
.cat-description{
display: table;
width: 100%;
height:24%;
}
.cat-text{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #40C2F1;
}
.line{
height: 1px;
width: 100%;
background: #95989A;
}
.footer-top{
width: 100%;
height: auto;
}
.social-icons{
color: #40C2F1;
text-align: right;
}
.sitemap{
color: #40C2F1;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.footer-content{
width: 100%
}
.footer-bottom{
padding:20px 0px;
color: #40C2F1;
width: 100%;
}
.foot-link{
margin-bottom:15px;
}
.footer-icon{
font-size: 2.5rem;
margin-left:5px;
display: inline-block;
width: auto;
}
.base-left{
text-align: left;
float: right;
}
.base-right{
text-align: right;
}
.footer-column{
vertical-align: top;
width: 24.5%;
display: inline-block;
height:200px;
}
.search-banner{
height:auto;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.search-field-wrap{
height: auto;
width: 100%;
margin: 50px 0px;
}
.combobox{
border-radius: 5px;
height:40px;
width: 15vw;
padding: 5px;
text-align: center;
border:1px solid #C9CACA;
display: inline-block;
margin: 0px 10px 0px 10px;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.button-wrap{
width: 100%;
text-align: center;
}
.image-card{
cursor: pointer;
margin: 0px 10px 25px 0px;
display: inline-block;
border-radius: 5px;
width: 20vw;
height: 25vw;
max-width: 295px;
max-height: 320px;
background: #fff;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.card-wrap{
display:table;
width: 100%;
height:65%;
border-bottom: 1px solid #C9CACA;
}
.card-icon{
width:100%;
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px 5px 0px 0px;
}
.card-img{
margin:0 auto;
width:45%;
height:56.25%;
background: black;
}
.card-description{
width: 100%;
height: 35%;
}
.card-text{
display: inline-block;
text-align: center;
width: 49%;
height:100%;
color: #40C2F1;
}
.card-text-wrapper{
display: table;
width:100%;
height: 100%;
text-align: center
}
.vehicle-details{
margin-bottom: 2px;
line-height: 1.2;
font-size: 0.7rem;
}
.vehicle-name{
font-size: 1rem;
line-height: 1;
margin-bottom: 5px;
}
.card-details{
padding-left: 15px;
display: table-cell;
vertical-align: middle;
text-align: left;
}
.price-tag{
display: table-cell;
vertical-align: middle;
font-size: 1.5rem;
font-family: 'lato', -serif;
font-weight: 700;
color: #23F4ED;
}
.ad-images{
width: 100%;
margin-bottom: 25px;
}
.top-section{
height:250px;
width: 100%;
}
.details-container{
position:fixed;
margin: 0;
padding-top: 10%;
padding-bottom: 10%;
width:100%;
opacity: 0;
height:100%;
background: rgba(2,36,62,0.3);
z-index: 1000;
transition:all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
visibility: hidden;
/* Safari */
}
.show{
visibility: visible;
opacity: 1;
}
.details-card{
display: block;
margin: auto;
padding:15px 11px;
padding-top:;
height: auto;
width: 800px;
background: white;
border-radius: 5px;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.details-card-header{
height: 40px;
}
.close-button{
cursor: pointer;
color: #C9CACA;
font-size: 1.5em;
font-weight: bolder;
float: right;
background: none;
border: none;
}
.details-card-content{
/*height: 90%;*/
height: 500px;
overflow-y: scroll;
padding: 11px;
}
/*.details-card{*/
/*height: 900px;*/
/*overflow-y: scroll;*/
/*padding: 11px;*/
/*}*/
.details-card-content::-webkit-scrollbar {
width:8px;
background: white;
}
.details-card-content::-webkit-scrollbar-track {
width: 15px;
}
.details-card-content::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #C9CACA;
}
.slider-card{
margin: 0px 10px 25px 0px;
width: 100%;
max-width: 900px;
height:425px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
margin-top: -150px;
}
.car-details-card{
margin: 0px 10px 25px 0px;
border-radius: 5px;
display:inline-block;
width: 470px;
height:40vh;
max-height: 300px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.contact-card{
vertical-align: top;
margin: 0px;
display:inline-block;
border-radius: 5px;
width: 262px;
height:25vw;
max-height: 300px;
background: #fff;
border:1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
}
.slide {
overflow: hidden;
/*border: 4px solid #E74C3C;*/
/* border: 4px solid #3498DB;*/
}
.slide-container{
opacity:0;
transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.show-slide{
opacity:1;
}
.slide-thumb {
opacity: 0.5;
}
.show-slide-thumb {
opacity: 1;
}
.slide, .slide li, .slide-image {
width: 100%;
height: 350px;
position: relative;
border-bottom:1px solid #C9CACA;
margin-top: -8px;
padding: 0px;
}
.slide li {
position: absolute;
z-index: 50;
}
/*Animation For Slider*/
#-webkit-keyframes
slider { 0% {
left: -500px;
}
100% {
left: 0;
}
}
.slide li:target {
z-index: 100;
-webkit-animation: slider 1s 1;
}
/*Not Target*/
#-webkit-keyframes
noTarget { 0% {
z-index: 75;
}
100% {
z-index: 75;
}
}
.slide li:not(:target) { -webkit-animation: noTarget 1s 1; }
.thumbs {
margin-bottom: 10px;
display: flex;
justify-content: center;
padding: 0px;
}
.thumbs li, .thumbs li a {
width: 98px;
height: 55px;
}
.thumbs li{
list-style-type: none;
}
.thumbs a {
/*display: block;*/
position: relative;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25), inset 1px 1px 0px rgba(0, 0, 0, 0.15);
}
.thumbs li a img {
width: 90px;
height: 45px;
border:1px solid #C9CACA;
}
.thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -30px;
display: block;
width: 98px;
height: 25px;
text-align: center;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: -moz-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: -o-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: -ms-linear-gradient(top, #fff 0%, #bcbcbc 100%);
background: linear-gradient(top, #fff 0%, #bcbcbc 100%);
}
.thumbs li a:hover span::before {
width: 0;
height: 0;
border-bottom: 5px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
position: absolute;
top: -5px;
left: 44px;
}
.card-header{
height:25%;
width: 100%;
display: table;
height: 45px;
border-bottom:1px solid #C9CACA;
text-align: center;
}
.card-header h1{
vertical-align: middle;
display: table-cell;
font-size: 1rem;
color: #40C2F1;
}
.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
margin-right:5px;
margin-bottom: 10px;
padding: 12px 15px;
display: inline-block;
/* Styles */
background: #fff;
border-radius: 5px;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
.inactive{
/* Size & position */
background: #f2f2f2;
pointer-events: none;
}
.wrapper-dropdown-5:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #4cbeff transparent;
}
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
width: auto;
min-width: 200px;
/* Styles */
background: #fff;
border-radius: 5px;
list-style: none;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: scroll;
}
.dropdown::-webkit-scrollbar {
width: 0.5em;
background: white;
border-radius: 5px;
}
.dropdown::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #C9CACA;
}
.dropdown::-webkit-scrollbar-track {
border-radius: 5px;
}
.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
}
.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;
}
.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}
.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}
.wrapper-dropdown-5.active {
background: #4cbeff;
box-shadow: none;
border-bottom: none;
color: white;
}
.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}
.mini-left{
width: 100px;
margin: 0;
padding: 12px 15px;
display: inline-block;
border-radius: 5px 0 0 5px;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
outline: none;
transition: all 0.3s ease-out;
}
.mini-right{
width: 100px;
margin: 0;
margin-right: 5px;
margin-left: -5px;
padding: 12px 15px;
display: inline-block;
/* Styles */
border-radius: 0 5px 5px 0 ;
border: 1px solid #C9CACA;
-moz-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
/* pagination */
.archive-pages{
}
.wrapper{
background-color:red;
margin:50px auto;
width:100%;
}
/*****Delete this*****/
.archive-pages li.selected{
color:white;
}
.archive-pages a,
.archive-pages a:visited{
color:#555;
}
.archive-pages li.selected{
color:white;
padding:5px;
width:25px;
line-height:20px;
background: #063c65;
}
.archive-pages li.selected:hover{
cursor:default;
background: rgb(53,121,214);
}
.archive-pages li:hover{
background: #f2f2f2;
}
.archive-pages li a{
cursor:pointer;
line-height:20px;
display:block;
padding:5px;
float:left;
width:25px;
text-aling:center;
}
.archive-pages{
display:block;
float:left;
padding:0px;
margin:0px;
font-size:.8em;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.archive-pages ul{
float:left;
margin:0px;
padding:10px;
list-style:none;
}
.archive-pages li{
border:1px solid #C9CACA;
float:left;
font-weight:700;
margin:0 2px;
text-align:center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: white;
-moz-box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
-webkit-box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
}
.archive-pages .first a,
.archive-pages .previous a,
.archive-pages .next a,
.archive-pages .last a{
overflow:hidden;
white-space:nowrap;
-webkit-transition-duration: 300ms;
-webkit-transition-property: width,text-indent,letter-spacing;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 300ms;
-moz-transition-property: width,text-indent,letter-spacing;
-moz-transition-timing-function: ease;
-o-transition-duration: 300ms;
-o-transition-property: width,text-indent,letter-spacing;
-o-transition-timing-function: ease;
}
.archive-pages a{
text-decoration:none;
}
.archive-pages .next a:after,
.archive-pages .last a:after{
content:" »";
}
.archive-pages .first a:before,
.archive-pages .previous a:before{
content:'« '
}
.archive-pages .first a:hover,
.archive-pages .previous a:hover,
.archive-pages .next a:hover,
.archive-pages .last a:hover{
width: 100px;
text-indent:0;
letter-spacing:0px;
}
.archive-pages .first a{
text-indent:+6px;
letter-spacing:10px;
}
.archive-pages .previous a{
text-indent:+7px;
letter-spacing:10px;
}
.archive-pages .next a{
text-indent:-159px;
letter-spacing:10px;
}
.archive-pages .last a{
text-indent:-154px;
letter-spacing:10px;
}
/*pagination ends*/
footer{
background: #02243E;
height:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!--META-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
<meta name="theme-color" content=""/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="{{asset('js/jquery.js')}}"></script>
<!--<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
</head>
<body>
<div class="details-container">
<div class="details-card">
<div class="details-card-header">
<button class="close-button">X</button>
</div>
<div class="details-card-content">
</div>
</div>
</div>
<header>
</header>
<div class ="categories-section">
<div class="section-container">
<div class="content-area">
<div class="image-card" onClick="showDetails(1)">
<div class="card-wrap">
<div class="card-icon" style="background-image:url('{{asset('img/car1.jpg') }}')">
</div>
</div>
<div class="card-description">
<div class="card-text">
<div class="card-text-wrapper">
<div class="card-details">
<p class="vehicle-name">make</p>
<p class="vehicle-details">year</p>
<p class="vehicle-details">type</p>
</div>
</div>
</div>
<div class="card-text">
<div class="card-text-wrapper">
<h1 class="price-tag">price</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tSection" class="top-section">
</div>
<div class="slider-card">
<ul class="slide">
<li class="slide-container show-slide" data-slide="1"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>
<li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>
</ul>
<ul class="thumbs">
<li class="slide-thumb show-slide-thumb" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>
<li class="slide-thumb" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>
</ul>
</div>
<div class="car-details-card">
<div id="card-details" class="card-header">
<h1>Car details</h1>
</div>
</div>
<div class="contact-card">
<div id="vendor-details" class="card-header">
<h1>Vendor Contact Info</h1>
</div>
</div>
<footer>
</footer>
</body>
</html>

You need to use jQuery's delegated click handler mechanism.
See Delegated events in http://api.jquery.com/on/
We add a click handler to your ul.thumbs HTML as this is present when we start. However, other slides are able to be added as we proceed. As such, a standard event handler would not work (as you've seen).
Try clicking the dynamically added entries to see this in action.
$(document).ready(function()
{
// We use a deferred click handler here as we will add further slide thumbs as we run...
$("ul.thumbs").on("click", "li.slide-thumb", function(e)
{
alert( $(this).data("slide") );
});
// Dynamically add new slides
for(var i=3; i<10; i++)
{
var $li = $("<li />").addClass("slide-thumb").data("slide", i);
$li.append( $("<img />").attr("src","//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&wid=90&hei=90") );
$("ul.thumbs").append($li);
}
});
img
{
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbs">
<li class="slide-thumb show-slide-thumb" data-slide="1">
<img src="//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&wid=90&hei=90">
</li>
<li class="slide-thumb" data-slide="2">
<img src="//images.clipartpanda.com/car-20clip-20art-nicubunu_Toy_car.png">
</li>
</ul>

How to make dropdown menu

I find this dropdown menu on internet.The problem is dropdown is always open and it doesnt work.When i paste all default code from http://codepen.io/Jeplaa/pen/IzAvx
it doesn't work.Please can you help me.How i can make when user click button it show dropdown menu and stay until user click on button again.
I include 2 scripts
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/menu.js"></script>
Also the the code of dropdown menu:
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Replace this line:
$( ".cog, .admin-text" ).on( "click", function()
With this line:
$( ".admin-panel" ).on( "click", function()
... and it will work.
You can check it on Codepen: http://codepen.io/catalin586/pen/LRbELV
You may also want to add a display none by default to your menu:
.menu {display: none;}

you use in JQ
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
.cog and .admin-text do not exist in your HTML . i guess you want your .menu to appear ( fadeIn ) after you click the .arrow or on the text with class ".user_text"
also you say that the .menu always appears, ofcourse that happens if you don't hide it. in this example i've hidden it by setting {display:none} in CSS
see code below
let me know if this is what you want.
$(".down,.user_text").click(function(){
$(".menu").fadeToggle( "fast" );
})
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics
Settings
Logout
</div>
</div>
</div>

.down & .user_text
Try it:
$( ".down, .user_text" ).on( "click", function() {
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img">
<b class="user_text">Curtis Jackson</b>
</div>
<span class="down">
<img src="http://i.imgur.com/bLXw2RL.png">
</span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Remove the .cog and change .admin-text to .admin-panel
$( ".cog, .admin-text" ).on( "click", function()
to
$( ".admin-panel" ).on( "click", function()
Hope it helps!
$( ".admin-panel" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

You are not having any elements with classes either cog or admin-text. You are using onclick on these. The codePen example which you have provided contains an element with admin-text class

you can use fadeIn and fadeOut in jquery
see the documentation in jquery

JavaScript calling show hide methods

I'm a complete newbie to JavaScript trying to understand simple things....
Please look at complete code below. It's simple, show and hide.
I'm doing something wrong due to which it's not working.
http://jsbin.com/esokic/edit#javascript,html,live
Would appreciate any help..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Close</title>
<SCRIPT type="text/javascript" src="jquery.all.min.js"></SCRIPT>
<style type="text/css">
.header-nav-outer {
float: left;
}
.get-daily-alerts-outer {
background: rgb(161, 8, 8); border-width: 0px 2px 2px; border-style: solid; border-color: rgb(0, 0, 0); padding: 2px 10px 20px 20px; border-radius: 0px 0px 8px 8px; width: 477px; height: 88px; display: none; position: absolute; z-index: 1000; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;
}
span.close {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -674px -748px; padding: 1px 0px 1px 16px; color: rgb(255, 255, 255); font-size: 10px; cursor: pointer;
}
.get-daily-alerts-head {
color: rgb(224, 220, 220); padding-bottom: 10px; font-size: 19px; font-weight: bold;
}
.get-daily-alerts-head span {
font-size: 13px; font-weight: normal;
}
.header-top-nav {
background: url("/img/snapdeal/sprite/snapdeal-x.png?v=1") repeat-x left -73px; margin: 0px 0px 3px 170px; width: 592px; height: 32px; overflow: hidden;
}
.get-deal-alerts {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -565px -803px rgb(161, 8, 8); padding: 3px 5px; width: 115px; color: rgb(255, 255, 255); font-size: 11px; float: left; cursor: pointer; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
}
.csupport-drop-outer {
float: right;
}
.csupport-drop {
width: 120px !important; display: block;
text-align: left;
color: #C7C5C5;
font-size: 11px;
font-weight: normal;
cursor: pointer;
}
span.selected-city {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat right 3px; padding-right: 20px;
}
.cust-support-outer {
margin: 0px; width: 121px; height: auto;
background: rgb(255, 255, 255); border-width: 0px 2px 7px; border-style: solid; border-color: rgb(0, 0, 0); margin: 0px; padding: 5px 2px; position: absolute; z-index: 1000 !important; border-radius: 0px 0px 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px;
}
ul.cust-support {
background: rgb(255, 255, 255); list-style: none; margin: 0px; padding: 0px; color: rgb(94, 94, 94); font-size: 12px;
}
ul.cust-support li {
margin-top: 1px;
margin-right: 5px;
border-bottom-color: #888484;
border-bottom-width: 1px;
border-bottom-style: dotted;
}
ul.cust-support li a {
list-style: none;
margin: 0px 0px 1px;
padding: 3px;
color: #5E5E5E;
font-size: 12px;
display: block;
cursor: pointer;
_cursor: hand;
}
.active-drop-tab {
background: rgb(255, 255, 255); border-width: 2px 2px 0px; border-style: solid; border-color: rgb(0, 0, 0); color: rgb(51, 176, 212); cursor: default; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
}
</style>
<script type="text/javascript">
this.init=function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
return false
});
};
</script>
</head>
<body>
<DIV class="header-nav-outer">
<DIV class="get-daily-alerts-outer">
<DIV align="right"><SPAN class="close">Close</SPAN></DIV>
<DIV class="get-daily-alerts-head">Get The Best Deals <SPAN>Everyday in your
mailbox</SPAN></DIV>
</DIV>
<DIV class="header-top-nav">
<DIV class="get-deal-alerts">Get daily deal alerts</DIV>
<DIV class="csupport-drop-outer">
<DIV class="csupport-drop"><SPAN class="selected-city">Customer
Support</SPAN></DIV>
<DIV class="cust-support-outer" style="display:none;">
<UL class="cust-support">
<LI><A><SPAN id="orderStatus">Order Status</SPAN></A></LI>
<LI><A><SPAN id="voucherResend">Resend Voucher</SPAN></A></LI>
<LI><A href="http://www.snapdeal.com/info/contactus" target="_blank">Contact
Us</A></LI></UL></DIV>
</DIV>
</DIV>
</body>
</html>

You never actually call init() so your click handlers are never being applied.
$(function() { init(); });

Try:
$(document).ready(function() {
$(".csupport-drop").click(function() {
$(this).addClass("active-drop-tab");
$(".cust-support-outer").show();
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
});
});

The problem is on this line:
this.init=function(){
What you want there instead of defining an init function is a document.ready handler, so
$(document).ready(function(){
and then at the end of the code block where you've got:
};
you need to close off the call to ready( that was opened above, so:
});
Or just leave your existing code as is and add a separate document.ready handler that calls your init function:
$(document).ready(init);
// OR, if you need to do other things in your document ready:
$(document).ready(function() {
// other stuff here
init();
// other stuff here
}
Updated demo: http://jsbin.com/esokic/6/edit