We Keep Coding

How to make smooth opening dropdown with basic javascript code?

How can I make the red backgrounded "Content" area open smoothly from top to bottom when click to "Clicker" with this piece of code? And extra question is, how can I add more Clickers in the same Html with the same javascript code? If I duplicate these, only one is working.
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.accordion {
position: relative;
width: 100%;
height: auto;
background:red;
}.grider{
display: block;
width: 100%;
background: #fff;
}
#myLinks {
display:none;
}
.content {
height:50px;}
<div class="accordion">
<a href="javascript:void(0);" onclick="myFunction()" class="grider clearfix toggle">
<span>Clicker</span>
</a>
<div class="content clearfix" id="myLinks">Content</div>
</div>

You don't need Javascript for all animations. Why don't you try with CSS?
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
e.target.classList.toggle('open')
})
})
html,
body {
margin: 0;
font-family: Arial;
}
nav {
display: flex;
}
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 0.25s;
}
.btn-dropdown.open>.dropdown-content-container {
max-height: 120px;
transition: all 0.4s;
}
<nav>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 1
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 1
</div>
</div>
</div>
</div>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 2
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 2.1<br /> DROPDOWN CONTENT 2.2<br /> DROPDOWN CONTENT 2.3<br /> DROPDOWN CONTENT 2.4<br />
</div>
</div>
</div>
</div>
</nav>

a few listed issues with building a concentration game

I've been at this for a while and can't seem to crack it. I'm a beginner learning to code and I've put myself to the test to build a concentration game. I'm having the following issues;
I only have 11 tiles instead of 16.
I don't have any matching colours
My colours are locking into place when they should only do that when matched with their pair.
I look forward to seeing if someone more advanced can assist.
var resetButton = document.getElementById("reset-button");
var colors= ["square-1" - "square-9"];
for (var i= 0; i < 10; i++){
colors.push("square-" + i);
}
function GameSquare (el, color) {
this.el= el;
this.isOpen = false;
this.isLocked= false;
this.el.addEventListener("click", this, false);
this.setColor(colors);
}
GameSquare.prototype.handleEvent = function(e) {
switch (e.type) {
case "click":
if (this.isOpen || this.isLocked) {
return;
}
this.isOpen = true;
this.el.classList.add('flip');
checkGame(this);
}
}
GameSquare.prototype.reset= function() {
this.isOpen= false;
this.isLocked= false;
this.el.classList.remove('flip');
}
GameSquare.prototype.lock = function() {
this.isLocked = true;
this.isOpen = true;
}
GameSquare.prototype.setColor = function(color) {
this.el.children[0].children[1].classList.remove(this.color);
this.color = color;
this.el.children[0].children[1].classList.add(color);
}
var gameSquares = [];
function random(n) {
return Math.floor(Math.random() * n)
}
function getSomeColors() {
var colorscopy = colors.slice();
var randomColors = [];
for (var i = 0; i < 8; i++) {
var index = random(colorscopy.length);
randomColors.push(colorscopy.splice(index, 1)[0]);
}
return randomColors.concat(randomColors.slice());
}
function setupGame() {
var array = document.getElementsByClassName("game-square");
var randomColors = getSomeColors();
for (var i= 0; i < array.length; i++) {
var index= random(randomColors.length);
var color = randomColors.splice(index, 1)[0];
gameSquares.push(new GameSquare(array[i], color));
}
}
var firstSquare = null;
function checkGame (GameSquare) {
if(firstSquare === null) {
firstSquare = GameSquare;
return
}
if (firstSquare.color === GameSquare.color) {
firstSquare.lock();
GameSquare.lock();
} else {
var a = firstSquare;
var b = GameSquare;
setTimeout(function() {
a.reset();
b.reset();
}, 400);
}
firstSquare = null;
}
function randomizeColors(){
var randomColors= getSomeColors();
gameSquares.forEach(function(GameSquare){
var color = randomColors.splice(random(randomColors.length), 1)[0];
GameSquare.setColor(color);
});
}
function clearGame(){
gameSquares.forEach(function(GameSquare) {
gameSquares.reset();
});
setTimeout(function() {
randomizeColors();
}, 500);
}
setupGame()
* {
padding: 0;
margin: 0;
}
.game-square {
box-sizing: border-box;
border: 1px solid #000;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.game-square > div {
width: 100%;
height: 200%;
position: absolute;
top: 0;
transition: 400ms;
}
.game-square > div > div {
height: 50%;
}
.game-square > div > div:first-child {
background-color: grey;
}
.flip > div {
top: -100%;
}
.square-0 {
background-color: aqua;
}
.square-1 {
background-color: bisque;
}
.square-2 {
background-color: blue;
}
.square-3 {
background-color: blueviolet;
}
.square-4 {
background-color: brown;
}
.square-5 {
background-color: cadetblue;
}
.square-6 {
background-color: chartreuse;
}
.square-7 {
background-color: chocolate;
}
.square-8 {
background-color: coral;
}
.square-9 {
background-color: teal;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid red;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#reset-button{
position: absolute;
top: 90px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Concentration Game</title>
<link href= "./styles.css" rel="stylesheet" type= "text/css">
</head>
<body>
<div class="container">
<div id="game">
<div class= "game-square">
<div>
<div></div>
<div class= "square-0"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-1"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-2"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-3"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-4"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-5"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-6"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-7"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-8"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-9"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-0"><div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-1"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-2"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-3"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-4"></div>
</div>
</div>
</div>
<button id="reset-button">Reset</button>
</div>
<script src= "./script.js"></script>
</body>
</html>

I made my own implementation with notes; you can compare to see different approach/techniques:
//pick 8 colors
const colors = ["red","blue","green","yellow","orange","purple","brown","pink"];
//double the colors
const double = colors.concat(colors);
//randomize the colors
const matches = [];
for(let i = 0; i < 16; i ++) {
const random = Math.floor(Math.random() * double.length);
matches.push(double.splice(random,1)[0]);
}
//create variable that houses id of comparing square
let compareTo;
//create global click disable
let disable = false;
//on click function
function reveal(e) {
//prevent spam click during comparison
if(disable) return;
//shorten e.target.id to id
const id = e.target.id;
//reveal clicked square
e.target.classList.toggle("hidden");
//remove its onclick
e.target.onclick = null;
//if no squares being compared, store id
if(!compareTo){
compareTo = id;
} else {
//otherwise if square colors match
if(matches[compareTo] === matches[id]){
//reset id reference (keeping both reveal);
compareTo = null;
//win condition
if(!document.getElementsByClassName("hidden").length) setTimeout(()=>alert("YOU WIN!"),0);
} else {
//otherwise prevent spam click during reveal
disable = true;
//and hide both squares, must be in a timeout to be visible
setTimeout(()=> {
e.target.classList.toggle("hidden");
document.getElementById(compareTo).classList.toggle("hidden");
//add onclick back
e.target.onclick = ()=> reveal(event);
document.getElementById(compareTo).onclick = ()=> reveal(event);
//enable clicking
disable = false;
//and erase id reference;
compareTo = null;
},750);
}
}
}
//reference container for iteration
const container = document.getElementById("container");
//iterate squares rather than hard code into html
for(let i = 0; i < 16; i ++){
const square = document.createElement("div");
square.onclick = ()=> reveal(event);
square.classList.add("square");
//add class that hides color
square.classList.add("hidden");
//ids match indexes of color matches
square.setAttribute("id",i);
//assign corresponding color
square.style.backgroundColor = matches[i];
container.append(square);
}
#container {
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap;
background: blue;
border: 1px solid black;
}
.square {
width: 25%;
height: 25%;
border: 1px solid black;
box-sizing: border-box;
}
.hidden {
background-color: dimgray !important;
}
<div id="container">
</div>

You were very close. I am guessing the material you are reading is only focused on going up to 10 colors. These are the issues that pertain to this:
By looking at your CSS, your .square-X classes only go up to 9. It should go up to 15 (0 index basis)
In your JS, your colors initialization for loop condition is i < 10. It should be i < 16 since you are targeting 16 colors.
Also this particular line var colors = ["square-1" - "square-9"]; is confusing. This is supposed to simply initialize an array but you are assigning it some kind of string value
By fixing these items, the memory game will work as expected. See demo below:
var resetButton = document.getElementById("reset-button");
var colors = [];
for (var i = 0; i < 16; i++) {
colors.push("square-" + i);
}
function GameSquare(el, color) {
this.el = el;
this.isOpen = false;
this.isLocked = false;
this.el.addEventListener("click", this, false);
this.setColor(color);
}
GameSquare.prototype.handleEvent = function(e) {
switch (e.type) {
case "click":
if (this.isOpen || this.isLocked) {
return;
}
this.isOpen = true;
this.el.classList.add('flip');
checkGame(this);
}
}
GameSquare.prototype.reset = function() {
this.isOpen = false;
this.isLocked = false;
this.el.classList.remove('flip');
}
GameSquare.prototype.lock = function() {
this.isLocked = true;
this.isOpen = true;
}
GameSquare.prototype.setColor = function(color) {
this.el.children[0].children[1].classList.remove(this.color);
this.color = color;
this.el.children[0].children[1].classList.add(color);
}
var gameSquares = [];
function random(n) {
return Math.floor(Math.random() * n)
}
function getSomeColors() {
var colorscopy = colors.slice();
var randomColors = [];
for (var i = 0; i < 8; i++) {
var index = random(colorscopy.length);
randomColors.push(colorscopy.splice(index, 1)[0]);
}
return randomColors.concat(randomColors.slice());
}
function setupGame() {
var array = document.getElementsByClassName("game-square");
var randomColors = getSomeColors();
for (var i = 0; i < array.length; i++) {
var index = random(randomColors.length);
var color = randomColors.splice(index, 1)[0];
gameSquares.push(new GameSquare(array[i], color));
}
}
var firstSquare = null;
function checkGame(GameSquare) {
if (firstSquare === null) {
firstSquare = GameSquare;
return
}
if (firstSquare.color === GameSquare.color) {
firstSquare.lock();
GameSquare.lock();
} else {
var a = firstSquare;
var b = GameSquare;
setTimeout(function() {
a.reset();
b.reset();
}, 400);
}
firstSquare = null;
}
function randomizeColors() {
var randomColors = getSomeColors();
gameSquares.forEach(function(GameSquare) {
var color = randomColors.splice(random(randomColors.length), 1)[0];
GameSquare.setColor(color);
});
}
function clearGame() {
gameSquares.forEach(function(GameSquare) {
gameSquares.reset();
});
setTimeout(function() {
randomizeColors();
}, 500);
}
setupGame()
* {
padding: 0;
margin: 0;
}
.game-square {
box-sizing: border-box;
border: 1px solid #000;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.game-square>div {
width: 100%;
height: 200%;
position: absolute;
top: 0;
transition: 400ms;
}
.game-square>div>div {
height: 50%;
}
.game-square>div>div:first-child {
background-color: grey;
}
.flip>div {
top: -100%;
}
.square-0 {
background-color: aqua;
}
.square-1 {
background-color: bisque;
}
.square-2 {
background-color: blue;
}
.square-3 {
background-color: blueviolet;
}
.square-4 {
background-color: brown;
}
.square-5 {
background-color: cadetblue;
}
.square-6 {
background-color: chartreuse;
}
.square-7 {
background-color: chocolate;
}
.square-8 {
background-color: coral;
}
.square-9 {
background-color: teal;
}
.square-10 {
background-color: hotpink;
}
.square-11 {
background-color: khaki;
}
.square-12 {
background-color: lime;
}
.square-13 {
background-color: turquoise;
}
.square-14 {
background-color: plum;
}
.square-15 {
background-color: red;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid red;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#reset-button {
position: absolute;
top: 90px;
}
<body>
<div class="container">
<div id="game">
<div class="game-square">
<div>
<div></div>
<div class=""></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
</div>
</div>
<button id="reset-button">Reset</button>
</body>

jQuery CSS - Slider swipe animation

UPDATE: Updated the code and added a better example to clearify what I want to achieve.
I have built a slider with jQuery.
I give each element the class .active which displays the hidden elements.
Now I want a swipe animation, so that the images come from left to right.
The problem is that I already have a complex code and I don't know how to achieve that.
Here is an example what I want to achieve: https://bootsnipp.com/snippets/Padax
Here is the code
https://codepen.io/Insane415/pen/NggLxe
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="http://via.placeholder.com/350x150" style="display:none;" class="active">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-2">
<div class="thumbnails">
<img src="http://via.placeholder.com/350x150" class="active-thumbnail">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<div class="col-md-6 center-me" style="height:100%;">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h2>Giant Heading 1</h2>
<p>Just some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 2</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 3</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 4</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
</div>
</div>
</div>
.text-holder .text p{margin: 0!important;}
.slider{
padding: 15px;
margin-top: 50px;
background: url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg');
background-repeat: no-repeat!important;
background-size: cover!important;
display: inline-block;
width: 100%;
border: 1px solid #ddd;
}
.slider .bullet-points a{
color: #ccc;
}
.thumbnails{
height: 195.11px;
margin-left: -25px;
}
.thumbnails img{
display:block;
max-height: 31.65%;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder{
margin-left: 0px;
height: 100%;
}
.text-holder .text{
display: none;
}
/*display active image*/
.active{
display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
margin-top: 15px;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.active-bullet{
color: #E22C26!important;
}
/*.image-holder{
max-width: 350px!important;
}
.image-holder img{
max-width: 350px!important;
}*/
.image-holder img{
/* text-align: center!important; */
margin: 0 auto;
}
.bullet-points a:hover{
color: #E22C26!important;
}
.center-me{
margin-top: 4%;
}
.text-holder a{
margin-top: 15px;
padding: 10px 20px 10px 20px;
}
.text-holder a:hover{
padding:10px 20px 10px 20px;
}
.text-holder{
font-size: 130%;
color: inherit;
}
.text-holder h2{
font-size: 200%;
}
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var backgrounds = ["url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-02.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-03.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-04.jpg')"];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});

You can do something like this using using CSS3,
Give each image an absolute position and give each image a width & height value.
Set the image container height so your slider pager sit below the images.
I use both #keyframes and transition to demonstrate how you can achieve the effect.
And in your javascript slider function, I added a function to add and remove the transition.
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});
/*how I could allign the images in one row*/
.image-holder {
display: inline-block;
width: 100%;
height: 220px;
}
.image-holder img {
display: block;
width: 200px;
height: 200px;
margin: 0;
opacity: 0;
top: 0;
left: 100%;
transition: left ease 1s;
position: absolute;
}
.image-holder img.transition {
animation: moveSlider ease 2s;
opacity: 1;
}
#keyframes moveSlider {
0% {
left: 50%;
}
50% {
left: -100%;
}
100% {
opacity: 0;
left: 100%;
}
}
.image-holder img.active {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
/*END image row allignment*/
.text-holder p{margin: 0;}
.slider{
padding:15px;
margin-top: 50px;
/*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
background-color: blue;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 100%;
}
.thumbnails {
height: 100%;
}
.thumbnails img {
width: 100%;
height: auto;
display: block;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder .text {
display: none;
}
.text-holder .text.active {
display: block;
}
/*display active image*/
.active {
}
.active-bullet{
color: #E22C26!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.bullet-points a:hover{
color: #E22C26!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-1">
<div class="thumbnails">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
</div>
<div class="col-md-7">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h1>Giant Heading 1</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 2</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 3</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 4</h1>
<p>Some more text</p>
</div>
</div>
</div>
</div>
</div>

JQuery transition jittering in Chrome

The code below works in Firefox, but having problem when executing in Chrome.
The idea is simple; after click change the 'max-height' property and show the rest of the text. Height is computed for each element itself and transition is executed via jQuery's .transition(). JS does it's work, but transition is represented poorly. It looks little better if I reduce the transition time, but still very far from expected.
Any ideas on how to fix representation in Chrome?
$(function() {
var Readmore = function(el) {
this.el = el || {};
var descriptionElement = this.el.find('#predmetDesc');
var chevronElement = this.el.find('#showMore');
var links = descriptionElement.add(chevronElement);
links.on('click', this.sloppy);
};
Readmore.prototype.sloppy = function() {
$this = $(this).parents().eq(1).find('#paragraph');
$sibling = $this.siblings('#showMore');
var expanded = $this.is('.expanded');
if (expanded) {
$this.transition({ 'max-height': '96px',
overflow: 'hidden'
}, 500, 'in', function() {
$this.removeClass("expanded");
});
$sibling.transition({
'rotate': '0deg'
}, 500, 'in', function() {
$sibling.removeClass("expanded");
});
} else {
$this.transition({
'max-height': $this.get(0).scrollHeight,
overflow: ''
}, 500, 'out', function() {
$this.addClass("expanded");
});
$sibling.transition({
'rotate': '180deg'
}, 500, 'out', function() {
$sibling.addClass("expanded");
});
}
};
var readMore = new Readmore($('.sviPredmetiCol'), false);
});
.paragraph {
display: inline-block;
max-height: 96px;
overflow: hidden;
padding-top: 23px;
margin-bottom: -4px;
}
div.paragraph > p {
text-decoration: none !important;
cursor: pointer;
}
p {
margin: 0;
}
#predmetDesc {
position: relative;
/*max-height: 97px; !*72px*!*/
}
#showMore {
position: relative;
display: block;
text-align: center;
line-height: 1;
cursor: pointer;
margin-bottom: -8px;
}
.fa-chevron-down::before {
position: relative;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sviPredmetiRow">
<div id="sviPredmetiId" class="col-xs-12 col-md-12 sviPredmetiCol">
<div id="parentAbs" class="panel panel-primary sviPredmetiPanel">
<div class="panel-heading">
<div class="panelMainTitle">courseName</div>
</div>
<div class="panel-body">
<div class="widget">
<div class="statEcts">
<div class="ects">
<span class="count">courseInfo</span>
<span class="desc">ECTS</span>
</div>
</div>
<div class="statCourse">
<div class="courseId">
<span class="count">courseID</span>
<span class="desc">ID predmeta</span>
</div>
</div>
</div>
<div id="paragraph" class="paragraph">
<p id="predmetDesc">Course description</p>
</div>
<!--/div .paragraph-->
<div id="showMore"><i class="fa fa-chevron-down"></i>
</div>
</div>
<!--/div .panel-body-->
</div>
<!--/div .sviPredmetiPanel-->
</div>
<!--/div .sviPredmetiCol-->
</div>
<!--/div sviPredmetiRow-->

HTML Carousel not registering

I am trying to get my carousel to function, but when clicking on the arrows, the slides don't change.
This is my code,
http://codepen.io/rkrc/pen/ogPaqM
HTML:
<div class="slider">
<!-- picture 01 -->
<div class="slide active-slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 02 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 03 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 04 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 05 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
</div>
<!-- Slider nav -->
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<!--End of slide show-->
CSS:
/* Carousel */
.slider {
background-color: #f7f7f7;
position: relative;
width: 100%;
height: 400px;
border-bottom: 10px solid #f7f7f7;
border-top: 10px solid #f7f7f7;
}
.slide {
text-align: center;
background: #f7f7f7;
display: none;
position: relative;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.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;
}
JS:
var main = function(){
//Carousel
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide= currentSlide.next();
if(nextSlide.length === 0){
nextSlide = $('.slide').first();
}
currentSlide.fadeout(600).removeClass('active-slide');
nextSlide.faseIn(600).addClass('active-slide');
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextDot.length === 0){
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
};
$(document).ready(main);
This is what I am trying to achieve, following the codecademy example.
http://codepen.io/rkrc/pen/Wbappy

You have some typos in the code as nevermind mentioned. fasein() should be fadeIn() and fadeout() needs to be capitalized to fadeOut(). However even with these fixes you may still run into some problems as the slider will show the next slide in the series before the fadeOut() animation is complete. Best to put the fadeIn() animation and target next slide in the callBack function of the active slide animation. Here's an example of something you could do:
currentSlide.fadeOut(600, function(){
$(this).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
hope this helps.

My changes to the JS file:
var main = function(){
//Carousel
//arrow-next
$('.arrow-next').click(function(e){
e.preventDefault(); //Added this
var currentSlide = $('.active-slide');
var nextSlide= currentSlide.next();
if(nextSlide.length === 0){
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600, function() { //Fixed spelling errors
$(this).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide'); //Fixed spelling errors
});
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextDot.length === 0){
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Followed the same pattern for arrow-prev
//arrow-prev
$('.arrow-prev').click(function(e){
e.preventDefault();
var currentSlide = $('.active-slide');
var prevSlide= currentSlide.prev();
if(prevSlide.length === 0){
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600, function() {
$(this).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevDot.length === 0){
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
Final product http://codepen.io/rkrc/pen/ogPaqM