Develop Reference

Swap div elements on hover Bootstrap 5

I'm trying to swap a div's contents in a Bootstrap 5 row structure on hover. I'm currently trying to use Jquery for this but the method isn't working. It doesn't show any errors whatsoever, just doesn't work.
I don't care much if this can be done in JS or CSS, just need a solution that can replace div contents on hover. Additionally, if there could be a replacement animation (fade or slide) that'd be great.
$('.switch').hover(function() {
$(this).find('start1').hide();
$(this).find('switched').show();
}
, function() {
$(this).find('switched').hide();
$(this).find('start1').show();
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>

You were close with the JavaScript. this ends up being the .switch element, so you can use that as the context for the selector. Obviously you'll need to update the logic to handle all of the menu items.
$('.switch').hover(function() {
$('.start1', this).hide();
$('.switched', this).show();
}, function() {
$('.switched', this).hide();
$('.start1', this).show();
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
Alternatively, here is a CSS-based approach
.switch:hover>.start1,
.switch:hover>.start2,
.switch:hover>.start3 {
display: none !important;
}
.switched,
.switched2,
.switched3 {
display: none;
}
.switch:hover>.switched,
.switch:hover>.switched2,
.switch:hover>.switched3,
.start1,
.start2,
.start3 {
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>

So I figured out a solution using CSS. Turns out the whole thing was much simpler than I thought.
Here's the Codepen.
HTML :
<div class="container my-5 px-5">
<div class="row switch gx-5 text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid hider mb-3 h-50" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid h-50 mb-3 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid mb-3 h-50 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
</div>
</div>
CSS :
.start1{
transition: background-color .25s;
}
.start2{
transition: background-color .25s;
}
.start3{
transition: background-color .25s;
}
.start1:hover{
background-color: #D86241;
}
.start2:hover{
background-color: #A1274C;
}
.start3:hover{
background-color: #771E3A;
}
.shower{
display: none;
color: white;
text-align: left !important;
}
.start1:hover .hider,
.start2:hover .hider,
.start3:hover .hider
{
display: none;
}
.start1:hover .shower,
.start2:hover .shower,
.start3:hover .shower
{
display: block;
}

Form doesn't work on server and only on mobile version

When I'm in localhost the website and the form work perfectly but when it's uploaded to a server, the form ONLY works on desktop version, on mobile the form doesn't filter and only shows all professionals.
The website its build with bootstrap and javascript.
<script type="text/javascript">
window.onload=function(){
var element1 = document.getElementById("link-index");
element1.classList.remove("active");
var element = document.getElementById("link-profesionales");
element.classList.add("active");
}
</script>
<div class=" p-2" style="background-color: #f2f3f4;">
<nav class="" aria-label="breadcrumb">
<div class=" col-sm-1 col-md-12 col-lg-12">
<ol class="breadcrumb">
<li class="ms-lg-5 ms-4 breadcrumb-item"><a class="breadcrumb-css" href="index.php">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page">Profesionales</li>
</ol>
</div><h1 class="ms-lg-5 ms-4">Profesionales</h1>
</nav>
</div>
<style type="text/css">
/* Create three equal columns that floats next to each other */
.column {
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
.card-footer{
position:absolute;
bottom:0;
width:100%;
background-color: white;
}
.form-select:focus {
border-color: #FFBE2C;
outline: 0;
box-shadow: 0 0 0 0.25rem #FFBE2C;
}
/*
select option {
background-color: #FFBE2C;
font-weight: bold;
color: white;
}
select option:checked{
box-shadow: 0 0 10px 100px #1882A8;
background-color: #FFBE2C;
font-weight: bold;
color: white;
}
*/
</style>
<div class="container">
<div class="row">
<div class="mt-5 col-12 text-center">
<div class="btn-group col-auto" role="group" aria-label="Basic example">
<form class="" method="GET" action="profesionales.php" id="formprofeesionales" >
<label style="font-weight: bold;" for="exampleFormControlInput1" class="form-label col-md-8">Consultar por Especialidad:</label>
<select id="select1" onchange="filterSelection('all')" class="form-select" aria-label="Default select example">
<option selected value="all">Todos</option>
<option onclick="filterSelection('Fisioterapia')" value="Fisioterapia">Fisioterapia</option>
<option onclick="filterSelection('Fonoaudiología')" value="Fonoaudiología">Fonoaudiología</option>
<option onclick="filterSelection('Psicología')" value="Psicología">Psicología</option>
</select>
</form>
</div>
</div>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row row-cols-2 g-2 row-cols-md-6 mt-1">
<div class="border-0 me-lg-4 my-lg-4 col card column Fonoaudiología">
<div class="content">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">María Silvina Luchino</h5>
<p class="card-text">Fonoaudiologa</p>
<p class="mb-5 card-text">MP 34567</p>
</div>
<div class="card-footer">Contactar</div>
</div>
</div>
</div>
<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">Milanesa Ola</h5>
<p class="card-text">Psicología</p>
<p class="mb-5 card-text">MP 34567</p>
</div>
<div class="card-footer">Contactar</div>
</div>
</div>
<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
<div class="content">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">Carla Paguaga de Santos</h5>
<p class="card-text">Psicología</p>
<p class="mb-5 card-text">MP 34567</p>
</div><div class="card-footer">Contactar</div>
</div>
</div>
</div>
<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">Marta</h5>
<p class="card-text">Psicología</p>
<p class="mb-5 card-text">MP 34567</p>
</div><div class="card-footer">Contactar</div>
</div>
</div>
<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">Lucia</h5>
<p class="card-text">Psicología</p>
<p class="mb-5 card-text">MP 34567</p>
</div><div class="card-footer">Contactar</div>
</div>
</div>
<div class="border-0 me-lg-4 my-lg-4 col card column Fonoaudiología">
<div class="h-100 card ">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">Elena</h5>
<p class="card-text">Fonoaudiologa</p>
<p class="mb-5 card-text">MP 34567</p>
</div><div class="card-footer">Contactar</div>
</div>
</div>
<div class="border-0 me-lg-4 my-lg-4 col card column Fisioterapia">
<div class="h-100 card">
<img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
<div class="card-body">
<h5 class="card-title">Susana</h5>
<p class="card-text">Fisioterapia</p>
<p class="mb-5 card-text">MP 34567</p>
</div><div class="card-footer">Contactar</div>
</div>
</div>
<!-- END GRID -->
</div>
</div>
<?php include 'footer.html'; ?>
The form is showing on mobile and its selectabled but just doesnt filter/work. What its wrong?
Thank you in advance!

Remove all the event listeners from the select element. It should look like the example below.
<select id="select1" class="form-select" aria-label="Default select example">
<option selected value="all">Todos</option>
<option value="Fisioterapia">Fisioterapia</option>
<option value="Fonoaudiología">Fonoaudiología</option>
<option value="Psicología">Psicología</option>
</select>
Then add a single event listener in your JavaScript file. This will listen for the change event on the #select1 element. Whenever a change occurs, it takes the current value of the select element (which is the value of the selected option) and passes that to the filterSelection call.
$(document).ready(function() {
$('#select1').on('change', function() {
const value = $(this).val();
filterSelection(value);
});
});

jquery only allow one div element to be selected at a time on click

I have styled some markup where the user can select a DIV and it shows highlighted.. this works fine, however, I want to only allow one DIV to be highlighted and selected at time.. currently the user can select all 3 DIVS and they will all show highlighted. I use jquery toggleClass to add/remove "active" class to DIV. "active" class is styled in css to show blue background.
how can I stop users from selecting all 3?
$('.pricecard.aircraft').click(function() {
// this will fire when you click view
$(this).toggleClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span></p>
</div>
</div>
</div>

To achieve your goal call removeClass() on all the other .pricecard.aircraft elements which are not the one which was clicked on:
let $divs = $('.pricecard.aircraft').click(function() {
$divs.not(this).removeClass('active');
$(this).toggleClass('active');
});
.active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span>
</div>
</div>
</div>

Just using HTML and CSS, no JavaScript is needed.
[name="price"]:checked + label > div {
background-color: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="price" id="price1" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span></p>
</div>
</div>
</label>
<input type="radio" name="price" id="price2" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price2">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span></p>
</div>
</div>
</label>
<input type="radio" name="price" id="price3" value="20944" class="d-none"/>
<label class="col-sm-4 my-1 d-inline-block" for="price3">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span></p>
</div>
</div>
</label>

You can use:
$('.pricecard.aircraft').click(function() {
$('.pricecard.aircraft').removeClass('active');
$(this).addClass('active');
})
.pricecard.aircraft.active {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft active h-100">
<div class="card-body">
<span class="price1">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price2">£20,944</span></p>
</div>
</div>
</div>
<div class="col-sm-4 my-1">
<div class="card pricecard aircraft h-100">
<div class="card-body">
<span class="price3">£20,944</span></p>
</div>
</div>
</div>
This works!

Multiple div height columns on row using JQuery

What approach can I take when I want to include multiple classes within a JQuery same height script?
I currently have four different divs classed as '.row-16' and it works perfectly, but how can I add more groups to this specific script?
I want to include .row-1 .row-2 etc..
Sorry for the confusion, but this is ultimately what I'm trying to achieve.
.row-1 has four columns that will all be the same height size depending on highest.
.row-2 will be separate from row-1 and will have it's own equal height columns.
Updated JSFiddle: http://jsfiddle.net/fLr9th4y/3/ - Working example on Row-11
Here is the code:
$(document).ready(function(){
$('.container').each(function(){
var highestBox = 0;
$(this).find('.row-16').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
})
$(this).find('.row-16').height(highestBox);
});
});
The above script currently aligns all four of my columns with the correct height, I just want to add more class groups.

Why not adding a new class, specifically for the elements that should have their height changed and target that? BTW, here is a similar script that I used a couple of years ago for such occasions.
(function ($, window, document, undefined) {
/**
* Equalize the height of the given items.
* #type {*|jQuery}
* #return mixed
* #param options
* Example: $('.item1, .item2').equalHeight({ container: '.container' });
*/
$.fn.equalHeight = function (options) {
var items, settings;
items = this;
settings = $.extend({
container: ''
}, options);
if (settings.container) {
// If a container is set, apply setHeight() for all containers.
$(settings.container).each(function () {
var thisC = $(this),
getItems = [];
$.each(items, function (index, value) {
getItems.push(thisC.find(value));
});
return setHeight(getItems);
});
} else {
// Otherwise we assume that the items exist only once in a page
// and we apply setHeight() to their first (and unique) instance.
return setHeight(this);
}
// Set the height of all items equal to the highest item.
function setHeight(getItems) {
var itemsH = [];
$(getItems).each(function () {
itemsH.push($(this).outerHeight());
});
var maxH = Math.max.apply(Math, itemsH);
$(getItems).each(function () {
return $(this).css('height', maxH);
});
}
}
})(jQuery, window, document);
(Demo)
Of course, I don't need it anymore, thanks to flexbox.

This should select each class that starts with "row", then get each unique one and then get the max height for each class and set all those to the max of the largest.
Per the question update, using the question and fiddle for possible answer using a given "row-" begins with, which does not seem to be in the fiddle but is in the question.
var myselector = 'row-';
function getRowMax(row) {
var heights = $(row).map(function() {
return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, heights);
return maxHeight;
}
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function getrow(value, index, self) {
return value.startsWith(myselector);
}
$(function() {
var rows = $('.container').find("[class^='" + myselector + "']");
var classListAll = [];
rows.each(function(item) {
var classes = item.attr('class').split(/\s+/);
classListAll.concat(classes);
});
// var classListAll = rows.attr('class').split(/\s+/);
var classList = classListAll.filter(onlyUnique).filter(getrow);
$.each(classList, function(index, item) {
var sel = '.' + item;
var m = getRowMax(sel);
$(sel).height(m);
});
});
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4,
h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}
.row>.col-md-12>span {
font-size: smaller;
}
.col-md-4>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev,
.slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
/* ----- */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>

Easy:
$(document).ready(function() {
$('.container').each(function() {
var highestBox16 = 0;
var highestBox1 = 0;
var highestBox2 = 0;
var highestBox3 = 0;
//var highestBox..
$(this).find('.row-16,.row-1,.row-2,.row-3').each(function() {
if($(this).hasClass('row-16')){
if ($(this).height() > highestBox16) {
highestBox16 = $(this).height();
}
}
if($(this).hasClass('row-1')){
if ($(this).height() > highestBox1) {
highestBox1 = $(this).height();
}
}
if($(this).hasClass('row-2')){
if ($(this).height() > highestBox2) {
highestBox2 = $(this).height();
}
}
if($(this).hasClass('row-3')){
if ($(this).height() > highestBox3) {
highestBox3 = $(this).height();
}
}
})
$('.row-16,.row-1,.row-2,.row-3').height(highestBox);
});
});

Fade effect does not work (Bootstrap 4)

I've managed to add an alphabetical filter on my index page.
My code gets inspired by this Bootsnip here: https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category. This Bootsnip is based on Bootstrap 3.3
My index page is based on Bootstrap 4 Beta.
Is there any reason why there is no fade effect when I click on a letter to filter albums?
UPDATE:
I have updated the code according to the answer below. I'm now using Bootstrap cards but I'm still stuck with animations when I apply filter: no fade or smooth effect...
Here is my new fiddle: https://jsfiddle.net/md8fkm0d/5/
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all") {
$('.filter').show('1000');
}
else {
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
body {
font-family: Arial;
font-size: 14pt;
font-weight: bold;
color: #cc6110;
background-color: #e3e0ce; /* Nenesse 8/17/2017: New color */
background-image: url(images/background-woodenfloor.jpg); /* Nenesse 8/16/2017: New background image */
}
.title {
font-size : 24pt;
font-weight: bold;
color: #cc6110; /* Nenesse 8/16/2017: New color */
}
img {
border: 0;
}
a {
font-size: 14pt;
color: #285e80; /* Nenesse 8/16/2017: New color instead of #FFFFFF */
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #cc6110;
}
a:hover img#thumbimage {
text-decoration: none;
}
.artist { /* Nenesse 8/16/2017: New class for different color */
color: #285e80;
font-size:12pt;
font-weight:bold;
}
.album { /* Nenesse 8/16/2017: new class for different color */
color: #cc6110;
font-size:10pt;
font-weight:bold;
}
.navigationline {
padding: 2px 0px;
}
.btn-info {
background-color: #285e80;
border-color: #cc6110;
}
.btn-info:hover {
background-color: #cc6110;
border-color: #285e80;
}
.filter-button {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #cc6110;
margin-bottom: 30px;
}
.filter-button:hover {
font-size: 18px;
border: 1px solid #cc6110;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #285e80;
}
.btn-default:active .filter-button:active {
background-color: #285e80;
color: white;
}
.card {
margin-top: 30px;
}
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Album List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"></link>
<link rel="StyleSheet" type="text/css" href="enhanced exportindex_wood.css"></link>
<meta http-equiv="cache-control" content="no-cache"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center">
<h1 class="title">Album List</h1>
</div>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="letterA">A</button>
<button class="btn btn-default filter-button" data-filter="letterB">B</button>
<button class="btn btn-default filter-button" data-filter="letterC">C</button>
<button class="btn btn-default filter-button" data-filter="letterD">D</button>
<button class="btn btn-default filter-button" data-filter="letterE">E</button>
<button class="btn btn-default filter-button" data-filter="letterF">F</button>
<button class="btn btn-default filter-button" data-filter="letterG">G</button>
<button class="btn btn-default filter-button" data-filter="letterH">H</button>
<button class="btn btn-default filter-button" data-filter="letterI">I</button>
<button class="btn btn-default filter-button" data-filter="letterJ">J</button>
<button class="btn btn-default filter-button" data-filter="letterK">K</button>
<button class="btn btn-default filter-button" data-filter="letterL">L</button>
<button class="btn btn-default filter-button" data-filter="letterM">M</button>
<button class="btn btn-default filter-button" data-filter="letterN">N</button>
<button class="btn btn-default filter-button" data-filter="letterO">O</button>
<button class="btn btn-default filter-button" data-filter="letterP">P</button>
<button class="btn btn-default filter-button" data-filter="letterQ">Q</button>
<button class="btn btn-default filter-button" data-filter="letterR">R</button>
<button class="btn btn-default filter-button" data-filter="letterS">S</button>
<button class="btn btn-default filter-button" data-filter="letterT">T</button>
<button class="btn btn-default filter-button" data-filter="letterU">U</button>
<button class="btn btn-default filter-button" data-filter="letterV">V</button>
<button class="btn btn-default filter-button" data-filter="letterW">W</button>
<button class="btn btn-default filter-button" data-filter="letterX">X</button>
<button class="btn btn-default filter-button" data-filter="letterY">Y</button>
<button class="btn btn-default filter-button" data-filter="letterZ">Z</button>
</div>
</div>
<hr/>
<div class="row">
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8660.html">
<img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB">
<a href="details/8666.html">
<img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Bolla</h4>
<p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterJ letterD">
<a href="details/8881.html">
<img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="Image A Journey To Rotterdam"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Jephté Guillaume | Diephuis</h4>
<p class="card-text text-center album">A Journey To Rotterdam</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL">
<a href="details/412.html">
<img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="Image La Home Box - Disc 4"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier</h4>
<p class="card-text text-center album">La Home Box - Disc 4</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterB">
<a href="details/376.html">
<img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="Image La Home Box - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Bambounou</h4>
<p class="card-text text-center album">La Home Box - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterH">
<a href="details/447.html">
<img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="Image La Home Box - Disc 5"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Traumer | Husbands</h4>
<p class="card-text text-center album">La Home Box - Disc 5</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterU letterM">
<a href="details/305.html">
<img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="Image La Home Box - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Uner | Marc Romboy</h4>
<p class="card-text text-center album">La Home Box - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterV letterC">
<a href="details/341.html">
<img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="Image La Home Box - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Laurent Garnier | Voiski | Copy Paste Soul</h4>
<p class="card-text text-center album">La Home Box - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10344.html">
<img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="Image Dj-Kicks - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10307.html">
<img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="Image Dj-Kicks - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM">
<a href="details/10124.html">
<img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="Image Dj-Kicks - Disc 3"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Moodymann</h4>
<p class="card-text text-center album">Dj-Kicks - Disc 3</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterS letterL letterA letterR">
<a href="details/8897.html">
<img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="Image Hagagatan Remixed"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Svreca | Lucy | Alexey Volkov | Rødhåd</h4>
<p class="card-text text-center album">Hagagatan Remixed</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/10673.html">
<img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="Image North Star / Silent Space"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">Tale Of Us</h4>
<p class="card-text text-center album">North Star / Silent Space</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8820.html">
<img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="Image Goddess Of A New Dawn"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Goddess Of A New Dawn</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/8719.html">
<img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="Image Mofo Congoietric"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Bayara Citizens</h4>
<p class="card-text text-center album">Mofo Congoietric</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9074.html">
<img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="Image The Girl And The Chameleon - Disc 1"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 1</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT">
<a href="details/9033.html">
<img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="Image The Girl And The Chameleon - Disc 2"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Exaltics</h4>
<p class="card-text text-center album">The Girl And The Chameleon - Disc 2</p>
</div>
</div>
<div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT letterJ">
<a href="details/8777.html">
<img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="Image Joaquin Joe Claussell Mixes"/>
</a>
<div class="card-block">
<h4 class="card-title text-center artist">The Lower East Side Pipes | Joe Claussell</h4>
<p class="card-text text-center album">Joaquin Joe Claussell Mixes</p>
</div>
</div>
</div>
<div class="row">
<br/>
<div class="value col-xs-6 col-sm-6 col-md-6" align="left">18/09/2017 00:18:40</div>
<div class="value col-xs-6 col-sm-6 col-md-6" align="Right">Powered by
<a target="_blank" href="https://www.collectorz.com/music" title="Music Collector">Music Collector</a> & JHR Enhanced Details template</div>
<br/>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="indexfilter.js"></script>
</body>
Thanks for your help.

I copyied the code from the template you used and smashed it into your build. Your code looked pretty messy to me so I changed it. Of course you can change it back to your design, if you wish to. When pushing on one of the buttons the animations will now show as intended and I added more classes (So If you have the authors "Laurent Garnier | Traumer | Bambounou" you can find them by either clicking "L", "G", "T" or "B").
You can find the new .html on my webpage.
Remark: I do not know why the card-elements of bootstrap violate the grid-system. Figure that out by yourself ;) One Solution would be to add overflow-x: hidden; white-space: nowrap; to your body in a <style> tag in header, but that would also cut off all the text in the card-elements...
If you like it you can download the .html by [windows, FireFox] right-clicking and then "save page with name..."

The answer was simple to solve my problem: change the url source of jquery... my bad!