Customizing Clockdown.js to Show only Minutes and Seconds - javascript

I have this template on CodePen
I've really tried to customize it to show only minutes and seconds, but I couldn't.
What I'm missing?
My next step is add buttons to setup the minutes, pause and reset the countdown, how can I do that?
Thanks in advance!
HTML:
<body>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3" id="days">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
</div>
<!-- /.clock -->
</div>
<!-- /.countdown-wrapper -->
</body>
CSS:
html, body {
height: 100%;
}
html {
background-image: url('http://i.imgur.com/E7djQGn.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('http://i.imgur.com/AOEi9ts.png');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
#media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}
JS:
var today = new Date();
// My target date is this month 30th 9.25pm
var target = new Date(today);
//target.setDate(2);
target.setHours(21,25,0,0);
// Countdown start from yesterday
var yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
yesterday.setHours(0,0,0,0);
$('.countdown').final_countdown({
'start': yesterday.getTime() / 1000,
'end': target.getTime() / 1000,
'now': today.getTime() / 1000,
seconds: {
borderColor: '#8ef58e',
borderWidth: '0.5'
},
minutes: {
borderColor: '#ff8d72',
borderWidth: '0.5'
},
hours: {
borderColor: '#69ccff',
borderWidth: '0.5'
},
days: {
borderColor: '#ffd35c',
borderWidth: '0.5'
}
});


Just set the class for the parts you don't want to display:none;
div.clock-hours { display:none; }
div.clock-days { display:none; }


Just delete the following two sections in the html and you'll be good to go:
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3" id="days">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->


This worked for me after I added id="hours" to the hours div
#days { display:none }
#hours { display:none }

Related

Why do I have to click my event handler target twice before the DOM is updated?

I am making a time tracking dashboard site, it has 3 links (Daily, Weekly, and Monthly) and I want the content to change based on which link is clicked. I am setting hash values for all 3 links as #daily, #weekly, and #monthly and in my jQuery script I am hiding and showing divs by adding if conditions that uses location.hash property to hide and show specific. The script is working somewhat but the content changes only when I double click on a link, I don't know what is wrong with my script. I have made a repository and also enabled GitHub pages for it, GitHub Repository and GitHub Pages Link.
let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');
window.onload = function() {
$(weekly).hide();
$(monthly).hide();
};
function hideAndShow() {
if (location.hash === '#daily') {
$(daily).show();
$(weekly).hide();
$(monthly).hide();
} else if (location.hash === '#weekly') {
$(daily).hide();
$(weekly).show();;
$(monthly).hide();
} else if (location.hash === '#monthly') {
$(daily).hide();
$(weekly).hide();
$(monthly).show();
}
};
let frequency = document.querySelectorAll('.user__frequency__link');
for (let i = 0; i < frequency.length; i++) {
frequency[i].addEventListener('click', function(_event) {
hideAndShow(this);
});
}
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500&display=swap');
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
--clr-neutral: hsl(0, 100%, 100%);
--clr-primary-100: hsl(236, 100%, 87%);
--clr-primary-200: hsl(235, 45%, 61%);
--clr-primary-300: hsl(246, 80%, 60%);
--clr-primary-400: hsl(235, 46%, 20%);
--clr-primary-500: hsl(226, 43%, 10%);
--clr-work: hsl(15, 100%, 70%);
--clr-play: hsl(195, 74%, 62%);
--clr-study: hsl(348, 100%, 68%);
--clr-exercise: hsl(145, 58%, 55%);
--clr-social: hsl(264, 64%, 52%);
--clr-self-care: hsl(43, 84%, 65%);
}
body {
font-family: 'Rubik', sans-serif;
background-color: var(--clr-primary-500);
color: var(--clr-neutral);
}
h1 {
margin: 0;
}
a {
text-decoration: none;
color: var(--clr-neutral);
}
.bg-primary-400 {
background-color: var(--clr-primary-400);
margin-top: 2.8rem;
border-radius: 1.25rem 1.25rem 0 0;
}
.user__frequency__link {
font-size: 22px;
font-weight: 400;
opacity: .5;
}
.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
opacity: 1;
}
.container {
margin: 5rem 1rem;
}
.rounded-box {
border-radius: 1.5rem;
overflow: hidden;
}
.rounded-box+.rounded-box {
margin-top: 1.6rem;
}
.box-padding {
padding: 1rem 2rem;
}
.box-padding1 {
padding: 3.4rem 2rem;
}
.box-padding2 {
padding: 1rem 2rem 2rem 2rem;
}
.user__name {
background-color: var(--clr-primary-300);
border-radius: 0 0 1.25rem 1.25rem;
display: flex;
gap: 2rem;
align-items: center;
justify-content: center;
}
.user__img {
border: 2px solid var(--clr-neutral);
border-radius: 50%;
width: 125px;
height: 125px;
}
.user__frequency {
display: flex;
justify-content: space-around;
}
.user {
background-color: var(--clr-primary-400);
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.heading-neutral {
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 0.846rem;
}
.ellipsis {
color: var(--clr-neutral);
}
.work {
background-color: var(--clr-work);
background-image: url(../images/icon-work.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.play {
background-color: var(--clr-play);
background-image: url(../images/icon-play.svg);
background-repeat: no-repeat;
background-position: 95% -2%;
}
.study {
background-color: var(--clr-study);
background-image: url(../images/icon-study.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.exercise {
background-color: var(--clr-exercise);
background-image: url(../images/icon-exercise.svg);
background-repeat: no-repeat;
background-position: 95% 0%;
}
.social {
background-color: var(--clr-social);
background-image: url(../images/icon-social.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.self-care {
background-color: var(--clr-self-care);
background-image: url(../images/icon-self-care.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.daily,
.weekly,
.monthly {
display: flex;
flex-grow: 1;
align-items: center;
}
.current {
font-size: 2rem;
font-weight: 300;
}
.previous {
margin-left: auto;
opacity: 0.6;
}
/* .weekly,
.monthly {
display: none;
} */
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="user rounded-box">
<div class="user__frequency box-padding">
<h3>Daily</h3>
<h3>Weekly</h3>
<h3>Monthly</h3>
</div>
</div>
<div class="work rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Work</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="work__daily" class="daily">
<div class="current">5hrs</div>
<!-- daily -->
<div class="previous">Yesterday - 7hrs</div>
<!-- daily -->
</div>
<div id="work__weekly" class="weekly">
<div class="current">32hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 36hrs</div>
<!-- weekly -->
</div>
<div id="work__monthly" class="monthly">
<div class="current">103hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 128hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="play rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Play</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="play__daily" class="daily">
<div class="current">1hr</div>
<!-- daily -->
<div class="previous">Yesterday - 2hrs</div>
<!-- daily -->
</div>
<div id="play__weekly" class="weekly">
<div class="current">10hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 8hrs</div>
<!-- weekly -->
</div>
<div id="play__monthly" class="monthly">
<div class="current">23hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 29hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="study rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Study</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="study__daily" class="daily">
<div class="current">0hrs</div>
<!-- daily -->
<div class="previous">Yesterday - 1hr</div>
<!-- daily -->
</div>
<div id="study__weekly" class="weekly">
<div class="current">4hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 7hrs</div>
<!-- weekly -->
</div>
<div id="study__monthly" class="monthly">
<div class="current">13hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 19hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="exercise rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Exercise</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="exercise__daily" class="daily">
<div class="current">1hr</div>
<!-- daily -->
<div class="previous">Yesterday - 1hr</div>
<!-- daily -->
</div>
<div id="exercise__weekly" class="weekly">
<div class="current">4hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 5hrs</div>
<!-- weekly -->
</div>
<div id="exercise__monthly" class="monthly">
<div class="current">11hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 18hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="social rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Social</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="social__daily" class="daily">
<div class="current">1hr</div>
<!-- daily -->
<div class="previous">Yesterday - 3hrs</div>
<!-- daily -->
</div>
<div id="social__weekly" class="weekly">
<div class="current">5hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 10hrs</div>
<!-- weekly -->
</div>
<div id="social__monthly" class="monthly">
<div class="current">21hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 23hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="self-care rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Self Care</h2>
<img class="" src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="self-care__daily" class="daily">
<div class="current">0hrs</div>
<!-- daily -->
<div class="previous">Yesterday - 1hr</div>
<!-- daily -->
</div>
<div id="self-care__weekly" class="weekly">
<div class="current">2hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 2hrs</div>
<!-- weekly -->
</div>
<div id="self-care__monthly" class="monthly">
<div class="current">7hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 11hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Your Name Here.
</div>

The problem really is just a race condition basically... You check the location hash before it gets updated by the click on the a. But, is that really what you'd like to do? Change the display according to the hash value, on a user click? Wouldn't you be better to just listen to hash changes, and act accordingly?
window.addEventListener("hashchange", hideAndShow);
Every time the hash changes, hideAndShow will trigger and do the changes needed... That way you do not have to remember to add X or Y events on every click that changes the hash value.

Your click handler is running before the location is updated. A quick way to resolve that is to wrap the function call in a zero-delay timeout, which forces it into the next execution cycle.
Learn more about other possible solutions.
let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');
window.onload = function() {
$(weekly).hide();
$(monthly).hide();
};
function hideAndShow() {
if (location.hash === '#daily') {
$(daily).show();
$(weekly).hide();
$(monthly).hide();
} else if (location.hash === '#weekly') {
$(daily).hide();
$(weekly).show();;
$(monthly).hide();
} else if (location.hash === '#monthly') {
$(daily).hide();
$(weekly).hide();
$(monthly).show();
}
};
let frequency = document.querySelectorAll('.user__frequency__link');
for (let i = 0; i < frequency.length; i++) {
frequency[i].addEventListener('click', function(_event) {
setTimeout(function() {
hideAndShow(this);
}); // no delay for you!
});
}
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500&display=swap');
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
--clr-neutral: hsl(0, 100%, 100%);
--clr-primary-100: hsl(236, 100%, 87%);
--clr-primary-200: hsl(235, 45%, 61%);
--clr-primary-300: hsl(246, 80%, 60%);
--clr-primary-400: hsl(235, 46%, 20%);
--clr-primary-500: hsl(226, 43%, 10%);
--clr-work: hsl(15, 100%, 70%);
--clr-play: hsl(195, 74%, 62%);
--clr-study: hsl(348, 100%, 68%);
--clr-exercise: hsl(145, 58%, 55%);
--clr-social: hsl(264, 64%, 52%);
--clr-self-care: hsl(43, 84%, 65%);
}
body {
font-family: 'Rubik', sans-serif;
background-color: var(--clr-primary-500);
color: var(--clr-neutral);
}
h1 {
margin: 0;
}
a {
text-decoration: none;
color: var(--clr-neutral);
}
.bg-primary-400 {
background-color: var(--clr-primary-400);
margin-top: 2.8rem;
border-radius: 1.25rem 1.25rem 0 0;
}
.user__frequency__link {
font-size: 22px;
font-weight: 400;
opacity: .5;
}
.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
opacity: 1;
}
.container {
margin: 5rem 1rem;
}
.rounded-box {
border-radius: 1.5rem;
overflow: hidden;
}
.rounded-box+.rounded-box {
margin-top: 1.6rem;
}
.box-padding {
padding: 1rem 2rem;
}
.box-padding1 {
padding: 3.4rem 2rem;
}
.box-padding2 {
padding: 1rem 2rem 2rem 2rem;
}
.user__name {
background-color: var(--clr-primary-300);
border-radius: 0 0 1.25rem 1.25rem;
display: flex;
gap: 2rem;
align-items: center;
justify-content: center;
}
.user__img {
border: 2px solid var(--clr-neutral);
border-radius: 50%;
width: 125px;
height: 125px;
}
.user__frequency {
display: flex;
justify-content: space-around;
}
.user {
background-color: var(--clr-primary-400);
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.heading-neutral {
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 0.846rem;
}
.ellipsis {
color: var(--clr-neutral);
}
.work {
background-color: var(--clr-work);
background-image: url(../images/icon-work.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.play {
background-color: var(--clr-play);
background-image: url(../images/icon-play.svg);
background-repeat: no-repeat;
background-position: 95% -2%;
}
.study {
background-color: var(--clr-study);
background-image: url(../images/icon-study.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.exercise {
background-color: var(--clr-exercise);
background-image: url(../images/icon-exercise.svg);
background-repeat: no-repeat;
background-position: 95% 0%;
}
.social {
background-color: var(--clr-social);
background-image: url(../images/icon-social.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.self-care {
background-color: var(--clr-self-care);
background-image: url(../images/icon-self-care.svg);
background-repeat: no-repeat;
background-position: 95% -7%;
}
.daily,
.weekly,
.monthly {
display: flex;
flex-grow: 1;
align-items: center;
}
.current {
font-size: 2rem;
font-weight: 300;
}
.previous {
margin-left: auto;
opacity: 0.6;
}
/* .weekly,
.monthly {
display: none;
} */
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="user rounded-box">
<div class="user__frequency box-padding">
<h3>Daily</h3>
<h3>Weekly</h3>
<h3>Monthly</h3>
</div>
</div>
<div class="work rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Work</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="work__daily" class="daily">
<div class="current">5hrs</div>
<!-- daily -->
<div class="previous">Yesterday - 7hrs</div>
<!-- daily -->
</div>
<div id="work__weekly" class="weekly">
<div class="current">32hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 36hrs</div>
<!-- weekly -->
</div>
<div id="work__monthly" class="monthly">
<div class="current">103hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 128hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="play rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Play</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="play__daily" class="daily">
<div class="current">1hr</div>
<!-- daily -->
<div class="previous">Yesterday - 2hrs</div>
<!-- daily -->
</div>
<div id="play__weekly" class="weekly">
<div class="current">10hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 8hrs</div>
<!-- weekly -->
</div>
<div id="play__monthly" class="monthly">
<div class="current">23hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 29hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="study rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Study</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="study__daily" class="daily">
<div class="current">0hrs</div>
<!-- daily -->
<div class="previous">Yesterday - 1hr</div>
<!-- daily -->
</div>
<div id="study__weekly" class="weekly">
<div class="current">4hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 7hrs</div>
<!-- weekly -->
</div>
<div id="study__monthly" class="monthly">
<div class="current">13hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 19hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="exercise rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Exercise</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="exercise__daily" class="daily">
<div class="current">1hr</div>
<!-- daily -->
<div class="previous">Yesterday - 1hr</div>
<!-- daily -->
</div>
<div id="exercise__weekly" class="weekly">
<div class="current">4hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 5hrs</div>
<!-- weekly -->
</div>
<div id="exercise__monthly" class="monthly">
<div class="current">11hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 18hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="social rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Social</h2>
<img src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="social__daily" class="daily">
<div class="current">1hr</div>
<!-- daily -->
<div class="previous">Yesterday - 3hrs</div>
<!-- daily -->
</div>
<div id="social__weekly" class="weekly">
<div class="current">5hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 10hrs</div>
<!-- weekly -->
</div>
<div id="social__monthly" class="monthly">
<div class="current">21hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 23hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
<div class="self-care rounded-box">
<div class="bg-primary-400 box-padding2">
<div class="row">
<h2 class="heading-neutral">Self Care</h2>
<img class="" src="./images/icon-ellipsis.svg" alt="">
</div>
<div class="row">
<div id="self-care__daily" class="daily">
<div class="current">0hrs</div>
<!-- daily -->
<div class="previous">Yesterday - 1hr</div>
<!-- daily -->
</div>
<div id="self-care__weekly" class="weekly">
<div class="current">2hrs</div>
<!-- weekly -->
<div class="previous">Last Week - 2hrs</div>
<!-- weekly -->
</div>
<div id="self-care__monthly" class="monthly">
<div class="current">7hrs</div>
<!-- monthly -->
<div class="previous">Last Month - 11hrs</div>
<!-- monthly -->
</div>
</div>
</div>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Your Name Here.
</div>

Put multiple slideshows using modals on a page

I'm trying to create a lightbox effect using modals and slideshows. It works just fine as long as only one slideshow is on a page. I would like to have multiple slideshow/lightboxs on a page. I am using the CSS and java from the link below in addition to bootstrap 3.
https://www.w3schools.com/howto/howto_js_lightbox.asp
Here is the code I modified from the link. I'm new at this so any help is appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BL Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/BLportfolio.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #FFFFFF;
}
a:link {
color: #B77433;
text-decoration: none;
}
a:hover {
color: #FFD600;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/averia-libre:n3:default.js" type="text/javascript"></script>
</head>
<body>
<!-- Illustration Section -->
<div class="container-fluid">
<div class="row"><h6>ILLUSTRATION</h6>
<div class="row">
<div class="item2">
<img src="images/illustration/thumbs/steampunkThumb.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/sdThumb.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/monsterThumb.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/weaselThumb.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/supermanThumb.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/bushThumb.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<div class="row"><HR SIZE="2" WIDTH="95%"></div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="images/illustration/steampunk.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="images/illustration/sd.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="images/illustration/monster.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="images/illustration/weasel.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="images/illustration/superman.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="images/illustration/bush.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/steampunkThumb.jpg" onclick="currentSlide(1)" alt="STEAMPUNK">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/sdThumb.jpg" onclick="currentSlide(2)" alt="SAN DIEGO">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/monsterThumb.jpg" onclick="currentSlide(3)" alt="MONSTER">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/weaselThumb.jpg" onclick="currentSlide(4)" alt="WEASEL">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/supermanThumb.jpg" onclick="currentSlide(5)" alt="SUPERMAN">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/bushThumb.jpg" onclick="currentSlide(6)" alt="W">
</div>
</div>
</div>
<!-- Illustration End -->
<!-- Technical Section -->
<div class="container-fluid">
<div class="row"><h6>TECHNICAL DRAFTING</h6>
<div class="row">
<div class="item2">
<img src="images/technical/thumb/tech1Thumb.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech2Thumb.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech3Thumb.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech4Thumb.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech5Thumb.jpg" onclick="openModal();currentSlide(11)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech6Thumb.jpg" onclick="openModal();currentSlide(12)" class="hover-shadow">
</div>
<div class="row"><HR SIZE="2" WIDTH="95%"></div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="images/technical/tech1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="images/technical/tech2.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="images/technical/tech3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="images/technical/tech4.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="images/technical/tech5.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="images/technical/tech6.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech2Thumb.jpg" onclick="currentSlide(2)" alt="Tech2">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech3Thumb.jpg" onclick="currentSlide(3)" alt="Tech3">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech4Thumb.jpg" onclick="currentSlide(4)" alt="Tech4">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech5Thumb.jpg" onclick="currentSlide(5)" alt="Tech5">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech6Thumb.jpg" onclick="currentSlide(6)" alt="Tech6">
</div>
</div>
</div>
<!-- Technical End -->
</div>
</div>
<footer class="row">
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Modal2 (background) */
.modal2 {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal2 Content */
.modal2-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
Java
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}

came looking for a different solution, but looking at the code, it seems that the error may be here...
<div class="item3">
<img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>
In the 2nd batch, should not the "currentSlide(1) actually be a continuation from the 6 slides above, so the content should be currentSlide(7) and onward down the script? Perhaps it was too simple...

CSS columns separating divs

I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..

Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

My JS is not working with my html/css. Not sure why. (Console error 'ReferenceError: $ is not defined')

I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.

if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps

You just need to include the jQuery library from here: http://jquery.com/download/

You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

jQuery toggle expand divs inside bootstrap container wrap

Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>

Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>

Categories

Resources