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;
}

Child flex Container doesn't want to respecting its parent container

I want to achieve a proper card with proper padding around the side but it doesn't work out. the problem is the flex content container won't respecting the parent (card) by resizing the margin or reducing the distance or else. It won't resizing or following the properties. I try separately reducing the text size but doesnt work either.
$(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});
.owl-testimonials {
margin-bottom: 30px;
}
.testimonial-card {
height: 100%;
text-overflow: ellipsis;
overflow: hidden;
padding-bottom: 20px;
width: 100%;
padding: 20px;
display: flex;
flex-direction: row;
border-radius: 20px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
align-content: space-evenly;
justify-content: center;
transform: scale(0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.owl-item.center .testimonial-card {
transform: scale(0.8);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}
.testimonial-content {
height: 100%;
display: flex;
flex-direction: column;
}
.testi-img {
width: 100%;
height: 100%;
position: relative;
}
.testi-title {
color: wheat;
filter: drop-shadow(0 0 0.75rem #000);
text-align: center;
border-radius: 40px;
margin-top: 30px;
padding: 30px;
width: 30%;
margin-inline: auto;
font-weight: bold;
font-size: xx-large;
}
<h3 class="testi-title"> Testimonial</h3>
<section class="owl-carousel owl-testimonials">
<div class="testimonial-card">
<img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
<div class="testimonial-content">
<h4>Bu Irma</h4>
<h5 class="date">Dosen</h5>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
<div class="testimonial-content">
<h4>Pak Andre</h4>
<h5 class="date">Kontraktor</h5>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
<div class="testimonial-content">
<h4>Pak Budi</h4>
<h5 class="date">Pedagang Bakso</h5>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
</section>

The text-overflow won't kick in until your text overflows first.
Change this:
.owl-item .testimonial-card {
height: 300px;
text-overflow: ellipsis;
}
To this:
.owl-item .testimonial-card {
height: 300px;
overflow: hidden;
text-overflow: ellipsis;
}

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>

div and its content are not showing in page

I'm trying to learn how to create a testimonials part on my page and somehow none of its contexts are showing up, no mater what I write.
I also tried to create an empty project with nothing inside, import all the text and still not show up. showing nothing but a blank page.
I'm new to HTML so am I doing something wrong?
So this is my index.html page
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="images/img-1.jpg">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa
dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis
placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
awdawdaw
daw
dawdaw
d
</div>
<div class="testimonial">
<div class="pic">
<img src="images/img-2.jpg">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa
dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis
placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#testimonial-slider").owlCarousel({
items: 1,
itemsDesktop: [1000, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
pagination: true,
transitionStyle: "backSlide",
autoPlay: true
});
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
style.css is this
.demo {
background: #3d3d3d;
}
.testimonial {
padding: 35px 50px;
margin: 0 20px 30px;
border-radius: 0 70px 0 70px;
border: 5px solid #ffc33c;
border-left: none;
border-right: none;
text-align: center;
}
.testimonial .pic {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .title {
display: block;
margin: 0 0 7px 0;
font-size: 20px;
font-weight: 600;
color: #ffc33c;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial .post {
display: block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
margin-bottom: 20px;
}
.testimonial .description {
font-size: 16px;
color: #fff;
line-height: 30px;
}
.owl-theme .owl-controls {
margin-top: 0;
}
.owl-theme .owl-controls .owl-page span {
background: #fff;
opacity: 0.8;
transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span {
background: #ffc33c;
}

Hey you did not put the script tags inside the body also you need to lead libraries like jQuery before executing your own code:
.demo {
background: #3d3d3d;
}
.testimonial {
padding: 35px 50px;
margin: 0 20px 30px;
border-radius: 0 70px 0 70px;
border: 5px solid #ffc33c;
border-left: none;
border-right: none;
text-align: center;
}
.testimonial .pic {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .title {
display: block;
margin: 0 0 7px 0;
font-size: 20px;
font-weight: 600;
color: #ffc33c;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial .post {
display: block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
margin-bottom: 20px;
}
.testimonial .description {
font-size: 16px;
color: #fff;
line-height: 30px;
}
.owl-theme .owl-controls {
margin-top: 0;
}
.owl-theme .owl-controls .owl-page span {
background: #fff;
opacity: 0.8;
transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span {
background: #ffc33c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="images/img-1.jpg">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
awdawdaw daw dawdaw d
</div>
<div class="testimonial">
<div class="pic">
<img src="images/img-2.jpg">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$("#testimonial-slider").owlCarousel({
items: 1,
itemsDesktop: [1000, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
pagination: true,
transitionStyle: "backSlide",
autoPlay: true
});
});
</script>
</body>
</html>

You should import your libraries before using them. Just change the order of <script> tags.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
pagination:true,
transitionStyle:"backSlide",
autoPlay:true
});
});</script>

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>