We Keep Coding

Infinite carousel with indicator and smooth transition

I'm struggling with infinite carousel below:
let $carousel = document.querySelector('.carousel');
let $ref_ribbon = document.querySelector('.carousel__ribbon');
let $ref_right = document.querySelector('.carousel__button--right');
let $ref_left = document.querySelector('.carousel__button--left');
let $ref_counter = 0;
let $direction;
const transfer = () => {
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
} else if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
}
$ref_ribbon.style.transition = "none";
$ref_ribbon.style.transform = "translateX(0px)";
setTimeout(function() {
$ref_ribbon.style.transition = "transform .7s ease-in-out";
})
}
const right_button = () => {
if ($direction === 1) {
$ref_ribbon.prepend($ref_ribbon.lastElementChild);
$direction = -1;
}
$direction = -1;
$carousel.style.justifyContent = 'flex-start';
$ref_ribbon.style.transform = `translateX(-${300}px)`;
}
const left_button = () => {
$ref_counter--;
if ($direction === -1) {
$ref_ribbon.appendChild($ref_ribbon.firstElementChild);
$direction = 1;
}
$direction = 1;
$carousel.style.justifyContent = 'flex-end';
$ref_ribbon.style.transform = `translateX(${300}px)`;
}
$ref_right.addEventListener('click', right_button);
$ref_left.addEventListener('click', left_button);
$ref_ribbon.addEventListener('transitionend', transfer)
.carousel {
display: flex;
margin: auto;
position: relative;
height: 200px;
width: 300px;
background-color: red;
justify-content: flex-start;
}
.carousel__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
}
.carousel__button--left {
left: 0;
}
.carousel__button--right {
right: 0;
}
.carousel__ribbon {
display: flex;
flex-direction: row;
outline: 3px solid black;
height: 100%;
transition: transform .7s ease-in-out;
}
.carousel__pane {
display: flex;
background-color: skyblue;
height: 100%;
width: 300px;
flex-shrink: 0;
outline: 1px dashed navy;
}
.carousel__content {
text-align: center;
margin: auto;
}
.carousel__indicator {
display: flex;
gap: 10px;
left: 50%;
transform: translateX(-50%);
height: 30px;
position: absolute;
bottom: 0;
}
.carousel__circle {
height: 10px;
width: 10px;
background-color: gray;
border-radius: 50%;
cursor: pointer;
}
.carousel__circle--active {
background-color: black;
}
<div class="carousel">
<button class="carousel__button carousel__button--left"><</button>
<button class="carousel__button carousel__button--right">></button>
<div class="carousel__ribbon">
<div class="carousel__pane">
<p class="carousel__content">Pane 1</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 2</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 3</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 4</p>
</div>
<div class="carousel__pane">
<p class="carousel__content">Pane 5</p>
</div>
</div>
<div class="carousel__indicator">
<div class="carousel__circle carousel__circle--active"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
<div class="carousel__circle"></div>
</div>
</div>
I would like to connect indicator so when somebody click on proper circle then carousel will automatically slide to this particular panel. Also, I would like to set this circles that they will show which panel is currently active.
In addition, I would like to get such effect that carousel will jump to this particular panel immediately, ommiting other panels between.
So, if active one is first panel and I click fifth circle, then carousel will smoothly change panel like to the panel number two, but instead of number two I will see number five.
Sadly I always fail to get this effect. I would appriciate if somebody more experienced direct me how to deal with this problem.

How to use more than one custom javascript css carousel on same page?

I am using an image carousel which is working perfectly. Except that I can't use 2nd, 3rd carousel on same page. If I use more than one carousel on same page than the 2nd and 3rd are not working only the 1st. I am not expert and need some help if it possbile to change the code and have more than one carousel on same page? Here is the code:
Style:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
Script:
const carousel = document.querySelector('.img-carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn.addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn.addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
Html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button id="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button id="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>

Here is a solution looping through the carousels. All you need to do is to make sure your styles are added. There are styles based on the id of the carousels - that needs to be added for all of them or made universal.
Here is little bit revised answer, no need to declare the functions and variables several times inside the forLoop like it was before.
What this code does it selects all carousels with the class .img-carousel and loops through them. Adding functionality to each carousel and relative buttons (based on index). The core functionality is the same only now it is added dynamically.
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = (carousel) => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
//Prev Carousel
const prevCarousel = (carousel) => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
// Auto carousel
carousels.forEach((carousel, index)=>{
nextBtn[index].addEventListener('click', e => {
nextCarousel(carousel);
});
prevBtn[index].addEventListener('click', e => {
prevCarousel(carousel);
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
let previousCall;
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//Debounce
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
});
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>

How would I approach adding automation to a slideshow?

I built a JS slideshow with clickable indicators. I would like for my slideshow to play automatically, while maintaining the functionality of the indicator buttons.
In the code example below, I attempted to add a setTimeout() method to change the image every 2000ms, but it seems to not be working. What would be the best approach to change the JS so I have some automation? I also attempted to use the setInterval method with no luck. I will provide the code below:
Thank you in advance for the help/tips/and advice
var editorialSlideIndex = 1;
showEditorialSlides(editorialSlideIndex);
//Next/previous controls
function plusSlides(n) {
showEditorialSlides(editorialSlideIndex += n);
}
//Thumbnail image controls
function currentSlide(n) {
showEditorialSlides(editorialSlideIndex = n);
}
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(showEditorialSlides, 2000); // Change image every 2 seconds
}
/*Slideshow Container */
.editorial-slideshow-container {
padding-top: 15px;
position: relative;
margin: auto;
}
/*Default Hide Images*/
.editorial-slideshow {
display: none;
}
/*Next and previous buttons*/
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -34px;
padding: 10px;
color: white;
font-weight: bold;
font-size: 34px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 128, 115, .5);
}
/* Position "next button" */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, background color */
.prev:hover,
.next:hover {
background-color: rgba(0, 128, 115, .8);
}
/* Caption text
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
Number text (1/3 etc)
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 15;
}
*/
/* The slideslideDotInd/bullets/indicators */
.slideDotInd {
cursor: pointer;
height: 15px;
width: 15px;
margin: 15px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-slider,
.slideDotInd:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: .25s;
}
#-webkit-keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#media only screen and (max-width: 425px) {
#CGConainer .banner-title H1 {
line-height: 50px;
}
}
#media only screen and (min-width: 768px) {
.editorial-slideshow-container {
width: 75%;
/*Max width is 576px*/
}
}
#media only screen and (min-width: 1024px) {
.editorial-slideshow-container {
width: 50%;
}
}
<div class="editorial-slideshow-container">
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-1.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-2.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-3.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-4a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-5a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-6.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-7.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-8.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-9.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-10.jpg" style="width:100%">
</div>
<p class="prev" onclick="plusSlides(-1)">‹</p>
<p class="next" onclick="plusSlides(1)">›</p>
</div>
<div style="text-align:center">
<span class="slideDotInd" onclick="currentSlide(1)"></span>
<span class="slideDotInd" onclick="currentSlide(2)"></span>
<span class="slideDotInd" onclick="currentSlide(3)"></span>
<span class="slideDotInd" onclick="currentSlide(4)"></span>
<span class="slideDotInd" onclick="currentSlide(5)"></span>
<span class="slideDotInd" onclick="currentSlide(6)"></span>
<span class="slideDotInd" onclick="currentSlide(7)"></span>
<span class="slideDotInd" onclick="currentSlide(8)"></span>
<span class="slideDotInd" onclick="currentSlide(9)"></span>
<span class="slideDotInd" onclick="currentSlide(10)"></span>
</div>

It's such a small change.
The way you called setTimeout is wrong.
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(() => showEditorialSlides(editorialSlideIndex = (n+1)), 2000); // Change image every 2 seconds
}
And that was the reason your function was being called incorrectly.
EDIT: I forgot to mention the reason. There was no way JavaScript knew what parameters you were passing to the function when you're trying to recurse.
You can try it out in the fiddle

FadeIn random Javascript Game

I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>

By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>

How can enable only one container to expand on click?

I'm trying to use expand/collapse container, and everything works except one little detail. I want to restrict end users from opening multiple container at once. Ideally, I want only one container to be expanded at once.

You can hide the other large box elements like
$(window).load(function() {
if ($(".navBoxes").length > 0) {
var html = document.getElementsByTagName("html").item(0);
var hasCSS3 = (html.className.indexOf("no-csstransforms") == -1)
$(".no-csstransforms .larger").toggleClass("undisplayed");
$(".larger").children().toggleClass("undisplayed");
// Expand nav box
$(".nav.plus").click(function() {
var smallerBox = $(this).closest(".navBox");
var largerBox = smallerBox.next();
var $ol = $(this).closest('.navBoxes').find('.navBox.larger').not(largerBox);
if (hasCSS3) {
//smallerBox.siblings(".smaller").toggleClass("contracted");
//smallerBox.siblings(".smaller").toggleClass("hidden");
//smallerBox.children().toggleClass("hidden");
//smallerBox.toggleClass("expanded").delay(600).toggleClass("hidden");
largerBox.toggleClass("atop").delay(600).toggleClass("hidden");
$ol.removeClass('atop').addClass('hidden');
} else {
//smallerBox.toggleClass("undisplayed");
//smallerBox.siblings(".smaller").toggleClass("undisplayed");
largerBox.toggleClass("undisplayed");
$ol.addClass('undisplayed')
}
largerBox.children().toggleClass("undisplayed");
$ol.children().addClass("undisplayed");
return false;
});
// Contract nav box
$(".nav.minus").click(function() {
var largerBox = $(this).parents(".navBox");
var smallerBox = largerBox.prev();
largerBox.children().toggleClass("undisplayed");
if (hasCSS3) {
largerBox.toggleClass("hidden");
largerBox.toggleClass("atop")
//smallerBox.toggleClass("hidden");
//smallerBox.toggleClass("expanded");
//smallerBox.children().toggleClass("hidden");
//smallerBox.siblings(".smaller").toggleClass("hidden");
//smallerBox.siblings(".smaller").toggleClass("contracted");
} else {
largerBox.toggleClass("undisplayed");
//smallerBox.toggleClass("undisplayed");
//smallerBox.siblings(".smaller").toggleClass("undisplayed");
}
return false;
});
}
setOrgChartDimensions();
})(jQuery);
.navBoxes .undisplayed {
display: none;
}
.navBoxes .navBox {
position: absolute;
float: left;
color: #fff;
}
.navBoxes .navBox.smaller {
width: 160px;
height: 160px;
z-index: 2;
}
.navBoxes .navBox.smaller.atop {
z-index: 4;
}
.navBoxes .navBox.larger {
width: inherit;
z-index: 1;
}
.navBoxes .navBox.hidden {
opacity: 0.0;
}
.navBoxes .navBox.larger.atop {
z-index: 3;
}
.navBoxes .navBox.larger .icon {
float: left;
}
.navBoxes .navBox.smaller a {
color: #fff;
}
.navBoxes .navBox.larger .title {
position: relative;
top: 10px;
}
.navBoxes .navBox.larger .body {
margin-top: 20px;
}
.navBoxes .navBox.larger .body a {
color: #fff;
text-decoration: underline;
}
.navBoxes .navBox .nav {
position: absolute;
width: 35px;
height: 30px;
padding-top: 5px;
}
.navBoxes .navBox .nav a {
color: #fff;
}
.navBoxes .navBox .nav.plus {
top: 110px;
left: 110px;
}
.navBoxes .navBox .nav.minus {
position: relative;
float: right;
}
.navBoxes .box1 {
background-color: #185394;
transform-origin: top left;
}
.navBoxes .box1.smaller:hover {
background-color: #214872;
}
.navBoxes .box2 {
background-color: #c94747;
transform-origin: top right;
}
.navBoxes .box2.smaller:hover {
background-color: #b24444;
}
.navBoxes .box2.smaller {
margin-left: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navBoxes">
<div class="navBox box1 smaller">
<div class="title"><a href="#">Heading 1</div>
<div class="nav plus">
<div class="sign"><a aria-expanded="false" href="/">more</a>
</div>
</div>
</div>
<div class="navBox box1 larger hidden">
<div class="body">
<p>- Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text -</p>
</div>
<div class="nav minus">
<div class="sign"><a aria-expanded="true" href="/">less</a>
</div>
</div>
</div>
<div class="navBox box2 smaller">
<div class="title">Heading 2
</div>
<div class="nav plus">
<div class="sign"><a aria-expanded="false" href="/">more</a>
</div>
</div>
</div>
<div class="navBox box2 larger hidden">
<div class="body">
<p>- Some Text - Some Text - Some Text - Some Text -</p>
</div>
<div class="nav minus">
<div class="sign"><a aria-expanded="true" href="/">less</a>
</div>
</div>
</div>
</div>

You will need some object to hold application state. you could create a variable such as
var expanded = false;
then wrap your code above in a statement like so that when you click to expand an item
if (!expanded) {
// proceed as normally
expanded = true;
} else {
// stop action from happening
return;
}
EDIT:
you'll also want to changed expanded back to false when you click on the minus
EDIT EDIT:
I made some modifications to your link
http://jsfiddle.net/eo1Ljw97/