We Keep Coding

jQuery toggle on all elements of the loop [Error]

I'm with this product loop, each one has a Details box, which appears when you click "More +", but inside the loop it is showing the box of all products when I click on any one, like can i make this unique for each product?
UPDATE!
Box I want to appear:
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
CSS:
div.keyFeaturesBox, div.viewSavingsBox {
display: none;
position: absolute;
left: 0;
bottom: 50px;
width: 100%;
height: 180px; max-height: 180px;
background-color: #f1f1f1;
box-sizing: border-box;
border: 2px solid rgba(112, 112, 112, .34);
}
Loop:
for ($i = 0; $i < count($vehicles); $i++) {
echo '<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>';
}
HTML Code:
<div class="vehicleDetails"><!-- Details start -->
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div><!-- Details end -->
jQuery code:
// Features Box Toggle
$(".keyFeatures-span").click(function() {
$(".keyFeatures").toggleClass("selectedFeatures");
$(".keyFeaturesBox").slideToggle("fast");;
});

You can use .closest() to move up the DOM tree and match any selector.
The example below is fully commented.
You didn't provide any HTML for .keyFeaturesBox so that line might need adapting, as a guess you might need to use .closest(".keyFeatures").find(".keyFeaturesBox") to move up the DOM tree to the wrapper class and then search the children for the features box. This is difficult to work out without all the HTML.
Demo
// Event trigger for click of .keyFeatures-span
$(".keyFeatures-span").click(function() {
// Move up DOM tree and apply class selectedFeatures to first match
$(this).closest(".keyFeatures").toggleClass("selectedFeatures");
// You didn't include .keyFeaturesBox in your example HTML so you might need to adapt this
$(this).closest(".keyFeaturesBox").slideToggle("fast");
});
.selectedFeatures {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vehicleDetails">
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
<div class="vehicleDetails">
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>

I have your code running like so:
<!-- Details start -->
<div class="vehicleDetails">
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
<div class="keyFeaturesBox">
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
<p>a feature</p>
</div>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
<!-- Details end -->
<script>
// Features Box Toggle
$(".keyFeatures-span").click(function() {
let $parentNode = $(this).parent('.keyFeatures');
$parentNode.toggleClass("selectedFeatures");
$parentNode.find(">.keyFeaturesBox").slideToggle("fast");
});
</script>

because of position: absolute; and the same bottom value all divs shown as overlapped and you see the only last div.
if you remove position: absolute; from your style, it will toggle all divs, but it will toggle from up to down, different than yours.
or after toggle, increase bottoms
$(".keyFeatures-span").click(function() {
$(".keyFeatures").toggleClass("selectedFeatures");
$(".keyFeaturesBox").slideToggle("fast");
$(".keyFeaturesBox").each(function(i,e){
$(this).css("bottom" , i * 180); //180 is your box height in css
});
});
div.keyFeaturesBox, div.viewSavingsBox {
display: none;
position: absolute;
left: 0;
bottom: 50px;
width: 100%;
height: 180px; max-height: 180px;
background-color: #f1f1f1;
box-sizing: border-box;
border: 2px solid rgba(112, 112, 112, .34);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vehicleDetails"><!-- Details start -->
<div class="keyFeatures">
<span id="keyFeatures" class="keyFeatures-span">Key Features +</span>
</div>
<div class="viewSavings">
<span id="viewSavings" class="viewSavings">View Savings +</span>
</div>
</div>
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive1</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive2</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>
<div class="keyFeaturesBox">
<div class="keyFeaturesBox-header">
<i id="keyFeaturesClose" class="far fa-times-circle"></i>
</div>
<div class="keyFeaturesBox-container">
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive3</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
<div class="features">
<i class="fas fa-car"></i>
<span>Front Wheel Drive</span>
</div>
</div>
</div>

Making < div > appear in a random order and in random position

I'm trying to create a minigame using JavaScript, HTML and CSS. It is structured as a table 4x4. Every row of my table is memorized inside a <section> tag. Each <section> cointains 4 <div>s. I would like to make one random element of the table appear when I hit a button. Also, it would be great to have elements appear in a random order.
Here's part of my code:
<section class="oggettoElements">
<i class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="11"></i>
<i class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="21"></i>
<i class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="31"></i>
<i class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="41"></i>
</section>
<section class="oggettoElements">
<i class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="12"></i>
<i class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="22"></i>
<i class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="32"></i>
<i class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="42"></i>
</section>
<section class="oggettoElements">
<i class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="13"></i>
<i class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="23"></i>
<i class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="33"></i>
<i class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="43"></i>
</section>
<section class="oggettoElements">
<i class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="14"></i>
<i class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="24"></i>
<i class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="34"></i>
<i class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="44"></i>
</section>
So, my goal is: have a function to make one element at a time appear (I'll call it with an onClick attribute in a button). The element will be a random one from the table.
Can anybody help me? Thank you very much

The following inline code snippet implements the random apparition of grid elements and demonstrates some (hopefully) helpful concepts:
Css-based layout using the display property for tabular layout;
Content centering with Css property display: flex;
Programmatic access to DOM element(s) using document.querySelector(...), document.querySelectorAll(...);
A DOM NodeList is not an array. Similar surprises abound, reference docs & specs are your friend. The docs, not YouTube videos ...
Remember that id attribute values must not be numeric. Avoid over-optimizing - the selection of elements not yet on display is extremely primitive, the more elements are visible, the more attempts are needed to find a hidden element. However, in response to interaction with slow humans, efficiency is not an issue ... ;)
let b_allVisible = false
;
function showme ( eve ) {
let e_chosen
, n_c
, n_r
;
b_allVisible = !(
Array
.from(document.querySelectorAll('div[id^="c-"]'))
.some ( (pe_grid) => { return pe_grid.style.visibility !== 'visible'; } )
);
if (b_allVisible) {
document.getElementById('showme').setAttribute('disabled', 'disabled');
} else {
do {
n_c = 1 + Math.floor( 4 * Math.random() );
n_r = 1 + Math.floor( 4 * Math.random() );
e_chosen = document.querySelector(`#c-${n_c}${n_r}`);
// Here (referencing an element by their id), 'document.getElementById(`c-${n_c}${n_r}`)' can also be used.
// Note the absence of the selector marker '#' for ids
} while ( e_chosen.style.visibility === 'visible' );
e_chosen.style.visibility = 'visible';
}
} // showme
body > section {
display: table;
padding: 20px;
}
section.oggettoElements {
display: table-row;
}
section.oggettoElements > div {
display: table-cell;
border: solid 1px black;
height: 30px;
width: 30px;
visibility: hidden;
}
section.oggettoElements > div > div {
display: flex;
height: 30px;
align-items: center;
justify-content: center;
}
div > span {
flex: 1;
text-align: center
}
<section>
<section class="oggettoElements">
<div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-11"><div><span>01</span></div></div>
<div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-21"><div><span>02</span></div></div>
<div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-31"><div><span>03</span></div></div>
<div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-41"><div><span>04</span></div></div>
</section>
<section class="oggettoElements">
<div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-12"><div><span>05</span></div></div>
<div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-22"><div><span>06</span></div></div>
<div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-32"><div><span>07</span></div></div>
<div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-42"><div><span>08</span></div></div>
</section>
<section class="oggettoElements">
<div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-13"><div><span>09</span></div></div>
<div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-23"><div><span>10</span></div></div>
<div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-33"><div><span>11</span></div></div>
<div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-43"><div><span>12</span></div></div>
</section>
<section class="oggettoElements">
<div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-14"><div><span>13</span></div></div>
<div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-24"><div><span>14</span></div></div>
<div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-34"><div><span>15</span></div></div>
<div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-44"><div><span>16</span></div></div>
</section>
</section>
<button id="showme" name="showme" onclick="showme()">Show Me!</button>

How to select the first item in list by default

Hello i want to select the first item in a list by default.So when i open the view i want the item Plafond sécurité sociale under Général to be selected by default.
$("#général").val($("#général a:first").selectedIndex());
<div class="col-12">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px;">
<div class="col-sm">
<div class="row" data-toggle="collapse" data-target="#général" style="cursor:pointer">
<span class="user" style="font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#général" style="float:right;margin-right:0px">
<i class="général_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
expand_more
</i>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="général" class="collapse">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Plafond sécurité sociale
</a>
<a class="mdc-list-item" tauxPlafonds="SMIC" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Smic
</a>
<a class="mdc-list-item" tauxPlafonds="CSG" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
CSG CRDS
</a>
<a class="mdc-list-item" tauxPlafonds="AGM" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
Abattement gérant majoritaire
</a>
</div>
</div>
</div>
</div>
</div>
How can i add modify my function to have a good result.

Not really sure what you are asking for, but the select the item you want and add styling of your choice.
$('.mdc-list-item')[0]
$('.mdc-list-item:first-child()')[0]
$('.mdc-list-item:first')[0]

Not sure if this is what you are looking for.
$(document).ready(function() {
$("#item1").addClass("selected");
$(".list-item").click(function() {
$(".list-item").removeClass("selected");
$(this).addClass("selected");
});
});
a {
max-width: 100px;
display: block;
margin: 5px;
padding: 5px 10px;
text-align: center;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
a:hover {
background-color: #eee;
}
a.selected {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="item1" href="#" class="list-item">Item 1</a>
<a id="item2" href="#" class="list-item">Item 2</a>
<a id="item3" href="#" class="list-item">Item 3</a>

Javascript scroll with buttons; Can be repeated as often as desired

I have some movies I want to display on my website within a horizontal, scrollable div.
Because I removed the scrollbar, the user can not scroll anymore, which is why I added two buttons. One button to move right and one button to move left.
The problem is, the buttons can be pressed as often as desired. So the movies won't get displayed anymore, because of the through Javascript added margin.
How can I resolve this issue?
I want to disable the left-button, when the start is reached and I want to disable the right-button, when the end is reached.
$('#right-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#left-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
});
::-webkit-scrollbar {
display: none;
}
.sc_content {
overflow-y: scroll;
}
.title_home {
font-size: 18px;
margin: 30px 0px -10px 30px;
}
.movie-scroll {
height: 300px;
white-space: nowrap;
overflow-x: scroll;
margin-right: 30px;
}
.thumbnail-movie-box {
width: 130px;
margin: 30px 0px 0px 30px;
display: inline-block;
}
.thumbnail-movie-content {
display: block;
position: relative;
}
.thumbnail-movie-poster {
width: 130px;
height: 195px;
}
.thumbnail-movie-title {
font-size: 12px;
font-weight: bold;
margin: 5px 0px 10px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thumbnail-movie-year {
font-size: 12px;
margin: -5px 10px 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="sc_content">
<h1 class="title_home">Movies</h1>
Left
<div class="movie-scroll">
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
</div>
Right

Fiddle: https://jsfiddle.net/zbavtpj4/
Change your javascript to the following:
var index = 0;
$('#right-button').click(function() {
event.preventDefault();
if(index <= 7){
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
index++;
}
});
$('#left-button').click(function() {
event.preventDefault();
if(index >= -2){
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
index--;
}
});
Uses an index to track position and doesn't change the margin if the index isn't in range. Boundaries are manually defined in this example. It is possible define the boundaries programmatically, but I don't have the time to do that.

Before animating, you should check .movie-scroll current margin-left.
If it's >= 0, the #left-button action shouldn't happen.
If it's bigger than .movie-scroll width, the #right-button action shouldn't happen.

This is all about width calculation and comparison.
Here is your updated Fiddle.
console.clear();
var movieWidth = $('.movie-scroll').outerWidth();
console.log(movieWidth);
var viewportWidth = $(window).outerWidth();
console.log(viewportWidth);
var moviePosterWidth = $(".thumbnail-movie-poster").outerWidth();
console.log(moviePosterWidth);
var leftBoundReached = false;
var rightBoundReached = false;
$('#right-button').click(function() {
event.preventDefault();
if(!rightBoundReached){
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
}
checkScrolling("right");
});
$('#left-button').click(function() {
event.preventDefault();
if(!leftBoundReached){
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
}
checkScrolling("left");
});
function checkScrolling(direction){
setTimeout(function(){
var scrolled = parseInt($('.movie-scroll').css("marginLeft"));
console.log(scrolled);
leftBoundReached = false;
rightBoundReached = false;
if(scrolled>viewportWidth-2*moviePosterWidth && direction=="left"){
console.log("left "+scrolled);
leftBoundReached = true;
}
if(-scrolled>=viewportWidth+movieWidth+0.10*moviePosterWidth && direction=="right"){
console.log("right "+scrolled);
rightBoundReached = true;
}
},300);
}
I left a lot console logs for you to get what is going on...

I might be super late in posting my answer, but this solution is scalable and hope works as you wish.
/* JS */
var scrollWidth = parseInt($('.movie-scroll .thumbnail-movie-box').first().next().position().left) - parseInt($('.movie-scroll .thumbnail-movie-box').first().position().left);
var noOfItems = $('.movie-scroll .thumbnail-movie-box').length;
var count = 0;
$('#right-button').click(function() {
event.preventDefault();
var movieScroll = $('.movie-scroll');
movieScroll.filter(function() {
if (count == (noOfItems - 1))
return false;
count++;
return true;
}).animate({
marginLeft: "-=" + scrollWidth + "px"
}, "fast");
});
$('#left-button').click(function() {
event.preventDefault();
var movieScroll = $('.movie-scroll');
movieScroll.filter(function() {
if (count == 0)
return false;
count--;
return true;
}).animate({
marginLeft: "+=" + scrollWidth + "px"
}, "fast");
});
/* CSS */
::-webkit-scrollbar {
display: none;
}
.sc_content {
overflow-y: scroll;
}
.title_home {
font-size: 18px;
margin: 30px 0px -10px 30px;
}
.movie-scroll {
height: 300px;
white-space: nowrap;
overflow-x: scroll;
margin-right: 30px;
}
.thumbnail-movie-box {
width: 130px;
margin: 30px 0px 0px 30px;
display: inline-block;
}
.thumbnail-movie-content {
display: block;
position: relative;
}
.thumbnail-movie-poster {
width: 130px;
height: 195px;
}
.thumbnail-movie-title {
font-size: 12px;
font-weight: bold;
margin: 5px 0px 10px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thumbnail-movie-year {
font-size: 12px;
margin: -5px 10px 10px 0px;
}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sc_content">
<h1 class="title_home">Movies</h1>
Left
<div class="movie-scroll">
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
</div>
Right

Active state accordion

Using this script for accordion. But I can't find how to change the color for the accordionButton when the button is active.
JS
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.accordionContent').hide();
$(".accordionContent").first().show();
});
CSS
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionContent {
padding: 4% 5% 2% 0%
}
Thanks.

The way your accordion works is by adding the .on class to the currently open accordion tab's button. As such, I think this is what you meant:
.accordionButton.on {
background-color: yellow;
}
If you meant the moment when the button is clicked, then this will do the trick:
.accordionButton:active {
background-color: red;
}
You can see these behaviours in the snippet below.
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$(".accordionButton").first().addClass('on');
$('.accordionContent').hide();
$(".accordionContent").first().show()
});
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionButton:active {
background-color: red;
}
.accordionButton.on {
background-color: yellow;
}
.accordionContent {
padding: 4% 5% 2% 0%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-container" class="f-ms">
<div id="accordion-link-1" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-1 -->
<div id="accordion-1" class="accordionContent">
<div id="accordion-title-1" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-1 -->
<div id="accordion-content-1" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-1-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-1 -->
</a>
<a href="">
<div id="accordion-1-tile-2" class="flex-grow-1 box-shadow">
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982">
<img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-2 -->
</a>
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101">
<div id="accordion-1-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-1-tile-3 -->
</a>
</div>
<!-- end accordion-content-1 -->
</div>
<!-- end accordion-1 -->
<div id="accordion-link-2" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-2 -->
<div id="accordion-2" class="accordionContent">
<div id="accordion-title-2" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-2 -->
<div id="accordion-content-2" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-2-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-1 -->
</a>
<a href="">
<div id="accordion-2-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-2 -->
</a>
<a href="">
<div id="accordion-2-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-2-tile-3 -->
</a>
</div>
<!-- end accordion-content-2 -->
</div>
<!-- end accordion-2 -->
<div id="accordion-link-3" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-3 -->
<div id="accordion-3" class="accordionContent">
<div id="accordion-title-3" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-3 -->
<div id="accordion-content-3" class="f-ms flex-container">
<a href="">
<div id="accordion-3-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-1 -->
</a>
<a href="">
<div id="accordion-3-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-2 -->
</a>
<a href="">
<div id="accordion-3-tile-3" class="flex-grow-1 ">
<a href="">
<img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-3 -->
</a>
</div>
<!-- end accordion-content-3 -->
</div>
<!-- end accordion-3 -->
<div id="accordion-link-4" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-4 -->
<div id="accordion-4" class="accordionContent">
<div id="accordion-title-4" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-4 -->
<div id="accordion-content-4" class="f-ms flex-container">
<a href="">
<div id="accordion-4-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-1 -->
</a>
<a href="">
<div id="accordion-4-tile-2" class="flex-grow-1 ">
<a href="">
<img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-2 -->
</a>
<a href="">
<div id="accordion-4-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-4-tile-3 -->
</a>
</div>
<!-- end accordion-content-4 -->
</div>
<!-- end accordion-4 -->
<div id="accordion-link-5" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-5 -->
<div id="accordion-5" class="accordionContent">
<div id="accordion-title-5" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-5 -->
<div id="accordion-content-5" class="f-ms flex-container">
<a href="">
<div id="accordion-5-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-1 -->
</a>
<a href="">
<div id="accordion-5-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-2 -->
</a>
<a href="">
<div id="accordion-5-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-3 -->
</a>
</div>
<!-- end accordion-content-5 -->
</div>
<!-- end accordion-5 -->
</div>