Develop Reference

Accordions are opening together

As you can see in the image, when I open one accordion, the accordion beside it opens as well. I think its the CSS that's causing the issue, but I'm not sure I expected the accordion to open by itself, not with the accordion beside it, it seems as if the JavaScript is controlling the max height of the accordion beside it too.
Here is the code:
const accordionItemHeaders =
document.querySelectorAll(".accordion-header");
accordionItemHeaders.forEach((accordionItemHeader) => {
accordionItemHeader.addEventListener("click", (event) => {
accordionItemHeader.classList.toggle("active");
//animation
const accordionItemBody = accordionItemHeader.nextElementSibling;
if (accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight =
accordionItemBody.scrollHeight + "px";
} else {
accordionItemBody.style.maxHeight = 0;
}
});
});
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
}
.accordion-card {
background-color: rgba(182, 210, 253, 0.041);
border-radius: 10px;
width: 30vw;
max-width: 385px;
min-width: 350px;
border: 1px solid rgba(153, 196, 239, 0.121);
position: relative;
}
.accordion-header {
color: rgba(255, 255, 255, 0.841);
font-weight: 600;
font-size: 1.25rem;
padding: 1rem 1.5rem 0.8rem 1.3rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-body-content {
color: rgba(255, 255, 255, 0.658);
font-weight: 400;
font-size: 1.1rem;
padding: 0.8rem 1rem 0.8rem 1.3rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right, rgba(153, 196, 239, 0.053), rgba(153, 196, 239, 0.201), rgba(153, 196, 239, 0.053)) 1;
letter-spacing: 0.02em;
}
.accordion-header::after {
content: '\003E';
font-size: 2rem;
font-weight: 400;
position: absolute;
right: 1rem;
transition: ease-in 0.3s;
}
.accordion-header.active::after {
transform: rotate(90deg);
transition: ease-in 0.3s;
}
<div class="accordion-wrapper">
<div class="accordion-card">
<div class="accordion-header">Card 1</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos aliquid sint voluptatum deserunt alias iusto excepturi pariatur odio
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 2</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 3</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 4</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 5</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 6</div>
<div class="accordion-body">
<div class="accordion-body-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
</div>
</div>
</div>
</div>

This is caused because display: flex uses align-items: stretch as default value which causes other elements in the row to fill whenever any enlarges the parent they all are contained in. Please set it to flex-start which will prevent this from happening, like this:
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
align-items: flex-start;
}

How can I make the image above the text when changing screen size

.service1{
display: grid;
grid-template-columns: 39% 61%;
}
.s-info{
padding: 20% 10% 0 10%;
background-color: #072645;
color: white;
}
.s-info h1{
font-size: 2rem;
}
/* font-size:1rem for width 300px */
.s-info p{
font-size: 1rem;
}
.s-img img {
width: 100%;
height: 646px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="service1">
<div class="s1 s-info">
<div class="line"></div>
<h1>UX/UI Design</h1>
<p>
Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex
minima nulla voluptate autem!Lorem ipsum dolor sit amet, consectetur
a accusantium commodi ex minima nulla voluptate autem!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum,
inventore nobis!Lorem ipsum dolor sit amet, consectetur a
accusantium commodi ex minima nulla voluptate autem! Voluptate alias
esse cumque?
</p>
</div>
<div class="s-img">
<img
src="https://s3-alpha-sig.figma.com/img/bcb7/a1c5/6db72a2f9cd55704e0e140a6eb63d3b5?Expires=1646006400&Signature=caVOH5cjcYrUaZ3KO10XI1~HwKtOMJJ4BI4ZvrXxJGhblSsO4e0~7imCTNl39XAeswii-n3zx7yPcgJERp3-h-d4tE5YgvBQArJKFBKsG1rq3T43NYQcgMpIWR0apgqfWGr8xA15DAcwQLt6EXAdWCXREiWJbQf~yLBpelTqX4okY1Ib8T3~~4tjJB77btzPAA8YifULxwptCytIzVKDOXLHS6dGRXqLjkuhgQeH6sL0~BRfFVbXkW7KeYVaDxM-ZcFm3XMycaVu0zcLDXBlwFrYK4c~~eletJfTpceREFmET4HF-AVMu3Mbe6L8F7bpNjysxpQKH2aS8nswj0ykDA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt=""
srcset=""
/>
</div>
</div>
</body>
</html>
I have used css grid to make this structure.
I can't figure out how to stack image above text after a particular screen size, I thought about media query but couldn't think through it.
Please help!
Its a simple grid with 2 columns. I want to know if there is a way that when the screen size shrinks image(right side component/ 2nd item) comes above and text comes below it.

The answer, as usual, is media queries. For grids, it's changing the template columns and rows so that things are stacked as you want them.
Here I've set the breakpoint at 800px so that it would stack in Stack Overflow's normal design, but maybe not at full page.
(I also changed the way your image was displayed so that it never appears distorted; that was a personal decision. Just remove aspect-ratio and uncomment your height to get it back to normal).
.service1 {
display: grid;
grid-template-columns: 39% 61%;
}
.s-info {
padding: 20% 10% 0 10%;
background-color: #072645;
color: white;
}
.s-info h1 {
font-size: 2rem;
}
/* font-size:1rem for width 300px */
.s-info p {
font-size: 1rem;
}
.s-img img {
width: 100%;
/*height: 646px;*/
aspect-ratio: 1.977808599167822;
}
#media screen and (max-width: 800px) {
.service1 {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.s-info {
padding: 0 10%;
grid-row: 2/2;
grid-column: 1/1;
}
.s-img {
grid-row: 1/1;
grid-column: 1/1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="service1">
<div class="s1 s-info">
<div class="line"></div>
<h1>UX/UI Design</h1>
<p>
Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem!Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum, inventore nobis!Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem! Voluptate alias esse cumque?
</p>
</div>
<div class="s-img">
<img src="https://s3-alpha-sig.figma.com/img/bcb7/a1c5/6db72a2f9cd55704e0e140a6eb63d3b5?Expires=1646006400&Signature=caVOH5cjcYrUaZ3KO10XI1~HwKtOMJJ4BI4ZvrXxJGhblSsO4e0~7imCTNl39XAeswii-n3zx7yPcgJERp3-h-d4tE5YgvBQArJKFBKsG1rq3T43NYQcgMpIWR0apgqfWGr8xA15DAcwQLt6EXAdWCXREiWJbQf~yLBpelTqX4okY1Ib8T3~~4tjJB77btzPAA8YifULxwptCytIzVKDOXLHS6dGRXqLjkuhgQeH6sL0~BRfFVbXkW7KeYVaDxM-ZcFm3XMycaVu0zcLDXBlwFrYK4c~~eletJfTpceREFmET4HF-AVMu3Mbe6L8F7bpNjysxpQKH2aS8nswj0ykDA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="" srcset="" />
</div>
</div>
</body>
</html>

Sorry it's a little confusing. You can design any responsive page you want with media queries. I gave float none for make the box above the text. You can run code snippet with full page for test it.
#media only screen and (max-width: 600px) {
.box {
background-color: yellow;
display: inline-block;
width: 400px;
height: 200px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 500px;
height: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 600px) {
.box {
background-color: yellow;
display: inline-block;
width: 450px;
height: 250px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 550px;
height: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 768px) {
.box {
background-color: yellow;
display: inline-block;
width: 550px;
height: 350px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 650px;
height: 550px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 992px) {
.box {
background-color: yellow;
display: inline-block;
width: 660px;
height: 450px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 750px;
height: 650px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 1200px) {
.box {
background-color: yellow;
width: 250px;
height: 250px;
float: left;
margin: 10px;
}
.box p {
margin-top: 40%;
}
.container {
border: 2px solid black;
width: 750px;
height: 270px;
margin-bottom: 20px;
}
.container span p {
padding-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<div style="text-align:center;" class="box">
<p>Box1</p>
</div>
<span>
<p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
mollitia
dolorem quas ipsum in molestiae nesciunt!
Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
dolores
</p>
</span>
</div>
<div class="container">
<div style="text-align:center;" class="box">
<p>Box2</p>
</div>
<span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
mollitia
dolorem quas ipsum in molestiae nesciunt!
Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
dolores
</p>
</span>
</div>
<div class="container">
<div style="text-align:center;" class="box">
<p>Box3</p>
</div>
<span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
mollitia
dolorem quas ipsum in molestiae nesciunt!
Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
dolores
</p>
</span>
</div>
</body>
</html>

Horizontal scroll jquery-mousewheel library function errors (ex: this. on is not a function)

I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a "this.on is not a function" or a similar error where something is not a function.
I have tried rotating my webpage but it just messes everything up (href anchors don't work?).
I tried to bind the .mousewheel on the window as well to no avail.
Is there another way to do this or is it just not possible?
HTML
<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
b
</li>
</ul>
<ul class="ul__second">
<li id="border">Homepage</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body,
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}
li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}
li:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
text-transform: uppercase;
color:white;
}
h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}
h3 {
font-size: 30px;
font-family:fantasy;
}
p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}
.main-container{
width: 100vw;
height: 100vh;
}
.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}
.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}
#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}
.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}
.container {
width: 400vw;
display: flex;
flex-direction: row;
}
.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}
.container .summer .img {
width: 400px;
height: 600px;
}
.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}
::-webkit-scrollbar{
display:none;
}
JS
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});
Sorry for the formatting!
Thank you!

The error is coming from the mousewheel library you linked to.
If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.
If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won't get that error anymore.

How to Implement scrollIntoView in a horizontal view table for testimony

I'm sorry maybe the title make you confused, but it exactly what the title said I want to make a testimony card using table as based but I almost finish it but i can't do the final touch for it, let say I have a pointer so when I click the pointer the card will swipe to the next card but it seems I'm confused as how to implement it using javascript. I get a hunch that I can use array of child for it and move in based on the index but the card testimony still won't move
I read some topic, but the near to what I want is answer in here: Scroll smoothly by 100px horizontally
but I confused as how to implement it.
this is my code:
var slideIndex = 1;
showSlides(slideIndex);
// Thumbnail image controls
function currentTestimony(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slider-item");
var pointers = document.getElementsByClassName("pointer");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
// for (i = 0; i < slides.length; i++) {
// slides[i].getElementsById('testimony-3').scrollIntoView()
// }
for (i = 0; i < pointers.length; i++) {
pointers[i].className = pointers[i].className.replace(" active", "");
}
pointers[slideIndex-1].className += " active";
}
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
#dark-slider-testimonial .card{
background-color: #f5f7fb;
border-radius: 20px;
width: 380px;
height: 380px;
margin: 0% 32px;
padding: 20px;
display: inline-table;
}
/*
===================================================================
First Table
===================================================================
*/
#dark-slider-testimonial {
border-radius: 20px;
margin: 20px auto;
padding: 5%;
width: 100%;
scroll-behavior: smooth;
}
#dark-slider-testimonial .container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
#dark-slider-testimonial .container::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#dark-slider-testimonial table {
font-family: 'Nunito', sans-serif;
width: 100%;
font-size: 0.8em;
color: #1d3962;
border: none;
border-top: none;
}
#dark-slider-testimonial tr{
text-align: left;
}
#dark-slider-testimonial td{
text-align: left;
scroll-snap-align: start;
}
#dark-slider-testimonial .testimony-name{
font-size: 1.6em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-title{
font-size: 1.4em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-subtitle{
font-size: 1.2em;
font-weight: normal;
color: #7E94B3;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-desc{
font-size: 1.2em;
font-weight: normal;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
<div>
<div class="container">
<table>
<tr>
<td id="testimony-1" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-2" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-3" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-4" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-5" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div style="text-align:center">
<span class="pointer" onclick="currentTestimony(1)"></span>
<span class="pointer" onclick="currentTestimony(2)"></span>
<span class="pointer" onclick="currentTestimony(3)"></span>
<span class="pointer" onclick="currentTestimony(4)"></span>
<span class="pointer" onclick="currentTestimony(5)"></span>
</div>
</div>
</div>
I feel I'm already near the answer but I can't quite know how to solved this, can someone help me to solve this problem?

Is this It?
I have illustrated the code I've added and removed in your stylesheet. And the entire Javascript has also changed. But it's all straight forward.
var PositionPerIndex = {
"1": "0",
"2": "-20%",
"3": "-40%",
"4": "-60%",
"5": "-80%"
};
document.querySelectorAll(".pointer").forEach(
function(pointer){
pointer.addEventListener('click',
function(){
document.getElementById("content").style.left = PositionPerIndex[this.getAttribute("data-index")];
}
);
}
);
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
#dark-slider-testimonial .card{
background-color: #f5f7fb;
border-radius: 20px;
width: 380px;
height: 380px;
margin: 0% 32px;
padding: 20px;
display: inline-table;
}
/*
===================================================================
First Table
===================================================================
*/
#dark-slider-testimonial {
border-radius: 20px;
margin: 20px auto;
padding: 5%;
width: 100%;
/* START Removed
scroll-behavior: smooth;
END
*/
/* START Added */
box-sizing: border-box;
overflow: hidden;
}
#dark-slider-testimonial .container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
/* START Removed
overflow-x: auto;
scroll-snap-type: x mandatory;
END
*/
/* START Added */
overflow: hidden;
}
#dark-slider-testimonial .container::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#dark-slider-testimonial table {
font-family: 'Nunito', sans-serif;
width: 100%;
overflow: hidden;
font-size: 0.8em;
color: #1d3962;
border: none;
border-top: none;
}
#dark-slider-testimonial tr{
text-align: left;
overflow: hidden;
display: flex;
flex-direction: row;
/* Added this */
width: 100%;
position: relative;
left: 0%;
transition: left .5s ease;
}
#dark-slider-testimonial td{
text-align: left;
scroll-snap-align: start;
/* Added this */
flex-basis: 20%;
}
#dark-slider-testimonial .testimony-name{
font-size: 1.6em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-title{
font-size: 1.4em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-subtitle{
font-size: 1.2em;
font-weight: normal;
color: #7E94B3;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-desc{
font-size: 1.2em;
font-weight: normal;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
<div>
<div class="container">
<table>
<tr id="content">
<td id="testimony-1" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-2" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-3" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-4" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-5" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div style="text-align:center">
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
</div>
</div>

Here is a more Universal Answer that works on a fixed size. You can just change sizing into percentage to make it work for different screen sizes.
I've worked it out on VS Code. You can just copy and paste it and run.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.main-container {
width: 100%;
max-width: 1200px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 20px;
}
table.card-space{
width: 100%;
height: auto;
min-height: 400px;
position: relative;
white-space: nowrap;
margin: 0;
padding: 0;
}
tr.card-space_container{
width: 100%;
left: 0; /* Initial Position */
position: relative;
/* Make a Smooth Left Transition */
transition: left .5s ease;
padding: 15px;
margin: 0;
padding: 0;
}
td.card{
box-sizing: border-box;
margin: 0;
width: 400px;
min-height: 390px;
margin: 0;
position: relative;
}
.card-space .card .content{
width: 400px;
min-height: 100%;
background-color: #f5f5f5;
min-height: 390px;
padding: 15px;
}
.pointer-space{
text-align: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.pointer-space .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.pointer-space .pointer:hover {
background-color: #3b73c5;
}
</style>
</head>
<body>
<div class="main-container">
<table class="card-space">
<tr class="card-space_container" id="card-space_container">
<td class="card">
<div class="content">
<h1>Card1</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card2</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card3</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card4</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card5</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card6</h1>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div class="pointer-space">
<span class="pointer" data-index="0"></span>
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
<script>
(function(){
// Get all the Pointers
var PointerList = document.querySelectorAll(".pointer");
// Get the Card container
var container = document.getElementById("card-space_container");
PointerList.forEach(function(pointer){
pointer.addEventListener('click', function(){
// First get the index represented by each pointer
var i = this.getAttribute('data-index');
// Summary:
// Then Calculate the position to which card-space_container must be set.
// examples:
// -If the index returned by a pointer is 0, then 0 x -40 = 0; so the position is set to 0px.
// -If the pointer return index as 1, then 1 x -400 = -400%;
// - etc...
container.style.left = (i * (-400)).toString().concat('px');
});
});
})();
</script>
</body>
</html>

Use CSS3 transitions on the opacity property for tabbed content does not work

I am working on a simple tabbed content box in HTML5, CSS3 and jQuery.
It works fine except I have not been able to fade the content in gradually, using CSS transitions and opacity. Here is the code:
$("#filters_switch").on("click", "li", function() {
$('#filters_switch li').removeClass('tab_selected');
$(this).addClass('tab_selected');
$('#filters_content > div').removeClass('tab_selected');
$('#' + $(this).find('a').data('href')).addClass('tab_selected');
});
#filters_switch {
padding: 0 4px;
margin-top: 10px;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}
#filters_switch li {
display: block;
float: left;
min-width: 200px;
padding: 0 1px;
margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
color: #000;
background: #fff;
border-bottom: 1px solid #fff;
}
#filters_switch a {
display: block;
text-decoration: none;
padding: 3px 6px;
font-size: 12px;
font-weight: bold;
background: #f2f2f2;
color: #962b27;
border: 1px solid #d0d0d0;
border-radius: 8px 8px 0 0;
}
#filters_content .tab {
padding: 0 10px;
display: none;
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
#filters_content .tab.tab_selected {
display: block;
opacity: 1;
}
#filters_content .tab h2 {
font-size: 18px;
font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
<li id="filters_standard_link" class="tabnav_li tab_selected">
<a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
</li>
<li id="filters_advanced_link" class="tabnav_li">
<a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
</li>
</ul>
<div id="filters_content" class="tabs">
<div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
<div id="filters_advanced" data-id="filters_advanced" class="tab">
<h2>Esse odit sapiente odio deleniti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
</div>
Since transitions can't be used on the display property, I have used it on the opacity, expecting the content to be firstly displayed, but with 0 opacity, then with opacity slowly brought to 1.
Yet, this does not happen. Why? How can I fix the problem?

As you said, you can't apply CSS transitions to display, so instead, try using .fadeIn() and .fadeOut() while absolutely positioning the tabs.
HIH
$("#filters_switch").on("click", "li", function() {
if(!$(this).hasClass('tab_selected')){
$(this).addClass('tab_selected').siblings('li').removeClass('tab_selected');
$('#' + $(this).find('a').data('href')).fadeIn('slow').siblings('div.tab').fadeOut('slow');
}
});
#filters_switch {
padding: 0 4px;
margin-top: 10px;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}
#filters_switch li {
display: block;
float: left;
min-width: 200px;
padding: 0 1px;
margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
color: #000;
background: #fff;
border-bottom: 1px solid #fff;
}
#filters_switch a {
display: block;
text-decoration: none;
padding: 3px 6px;
font-size: 12px;
font-weight: bold;
background: #f2f2f2;
color: #962b27;
border: 1px solid #d0d0d0;
border-radius: 8px 8px 0 0;
}
#filters_content .tab {
padding: 0 10px;
display: none;
position: absolute;
}
#filters_content .tab.tab_selected {
display: block;
//opacity: 1;
}
#filters_content .tab h2 {
font-size: 18px;
font-weight" bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
<li id="filters_standard_link" class="tabnav_li tab_selected">
<a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
</li>
<li id="filters_advanced_link" class="tabnav_li">
<a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
</li>
</ul>
<div id="filters_content" class="tabs">
<div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
<div id="filters_advanced" data-id="filters_advanced" class="tab">
<h2>Esse odit sapiente odio deleniti</h2>
<p>Lorem ipsum dol odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
</div>

You need to modify jQuery and css. with the use of fadeIn and fadeOut, you can achieve what you want
$("#filters_switch").on("click", "li", function() {
var toggleSection = $(this).attr('data-toggle');
$('.tabnav li').removeClass('tab_selected');
$(this).addClass('tab_selected');
$('#filters_content > div').fadeOut(250);
$("[data-tab="+toggleSection+"]").delay(300).fadeIn(250);
});
#filters_switch {
padding: 0 4px;
margin-top: 10px;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}
#filters_switch li {
display: block;
float: left;
min-width: 200px;
padding: 0 1px;
margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
color: #000;
background: #fff;
border-bottom: 1px solid #fff;
}
#filters_switch a {
display: block;
text-decoration: none;
padding: 3px 6px;
font-size: 12px;
font-weight: bold;
background: #f2f2f2;
color: #962b27;
border: 1px solid #d0d0d0;
border-radius: 8px 8px 0 0;
}
#filters_content .tab {
padding: 0 10px;
/* display: none; */
/* opacity: 0; */
/* -webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s; */
}
#filters_content .tab.tab_selected {
display: block;
/* opacity: 1; */
}
#filters_content .tab h2 {
font-size: 18px;
font-weight:bold;
}
#filters_content > div {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
<li id="filters_standard_link" class="tabnav_li tab_selected" data-toggle="section-one">
<a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
</li>
<li id="filters_advanced_link" class="tabnav_li" data-toggle="section-two">
<a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
</li>
</ul>
<div id="filters_content" class="tabs">
<div id="filters_standard" data-id="filters_standard" data-tab="section-one" class="tab tab_selected">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
<div id="filters_advanced" data-id="filters_advanced" class="tab" data-tab="section-two">
<h2>Esse odit sapiente odio deleniti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
</div>
Working fiddle here

Transition doesn't get applied to certain properties including display property so you can use a workaround using, z-index, and position absolute, like the example..
$("#filters_switch").on("click", "li", function() {
$('#filters_switch li').removeClass('tab_selected');
$(this).addClass('tab_selected');
$('#filters_content > div').removeClass('tab_selected');
$('#' + $(this).find('a').data('href')).addClass('tab_selected');
});
#filters_switch {
padding: 0 4px;
margin-top: 10px;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}
#filters_switch li {
display: block;
float: left;
min-width: 200px;
padding: 0 1px;
margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
color: #000;
background: #fff;
border-bottom: 1px solid #fff;
}
#filters_switch a {
display: block;
text-decoration: none;
padding: 3px 6px;
font-size: 12px;
font-weight: bold;
background: #f2f2f2;
color: #962b27;
border: 1px solid #d0d0d0;
border-radius: 8px 8px 0 0;
}
#filters_content {
position:relative;
}
#filters_content .tab {
padding: 0 10px;
z-index: 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
position: absolute;
top: 0;
}
#filters_content .tab.tab_selected {
z-index: 1;
opacity: 1;
}
#filters_content .tab h2 {
font-size: 18px;
font-weight" bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
<li id="filters_standard_link" class="tabnav_li tab_selected">
<a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
</li>
<li id="filters_advanced_link" class="tabnav_li">
<a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
</li>
</ul>
<div id="filters_content" class="tabs">
<div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
<div id="filters_advanced" data-id="filters_advanced" class="tab">
<h2>Esse odit sapiente odio deleniti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
</div>

Removed display:none from .tab and positioned them absolute.
$("#filters_switch").on("click", "li", function() {
$('#filters_switch li').removeClass('tab_selected');
$(this).addClass('tab_selected');
$('#filters_content > div').removeClass('tab_selected');
$('#' + $(this).find('a').data('href')).addClass('tab_selected');
});
#filters_switch {
padding: 0 4px;
margin-top: 10px;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}
#filters_switch li {
display: block;
float: left;
min-width: 200px;
padding: 0 1px;
margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
color: #000;
background: #fff;
border-bottom: 1px solid #fff;
}
#filters_switch a {
display: block;
text-decoration: none;
padding: 3px 6px;
font-size: 12px;
font-weight: bold;
background: #f2f2f2;
color: #962b27;
border: 1px solid #d0d0d0;
border-radius: 8px 8px 0 0;
}
#filters_content {
position: relative;
}
#filters_content .tab {
padding: 0 10px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
position: absolute;
}
#filters_content .tab.tab_selected {
display: block;
opacity: 1;
}
#filters_content .tab h2 {
font-size: 18px;
font-weight" bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
<li id="filters_standard_link" class="tabnav_li tab_selected">
<a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
</li>
<li id="filters_advanced_link" class="tabnav_li">
<a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
</li>
</ul>
<div id="filters_content" class="tabs">
<div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
<div id="filters_advanced" data-id="filters_advanced" class="tab">
<h2>Esse odit sapiente odio deleniti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
</div>
</div>