Fade effect does not work (Bootstrap 4) - javascript

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!

Related

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

Bootstrap5 tab content on second tab creates unlimited white space

in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year.
The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the
This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go e.g. to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.
What is the problem?
Actual look:
How it has to be looked:
After some testing i see this:
Code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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="card-header">
<div>
<ul class="nav nav-pills nav-fill mt-4" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
<span><strong>Current Month</strong></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
<span><strong>Current Year</strong></span>
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="month"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-month" id="current-month">Current Month</button>
<button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="monthly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="monthy_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="monthly_training_days"></h2>
<h2 class="card-title text-white" id="monthly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="monthy_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="monthly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Year" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="year"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-year" id="current-year">Current Year</button>
<button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="yearly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="yearly_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="yearly_training_days"></h2>
<h2 class="card-title text-white" id="yearly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="yearly_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="yearly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

After a lot of researching and reading i found the solution for this problem.
The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}

It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.

How to filter products using javascript?

I'm unable to make this filter work properly.
All I want is if someone clicks on a particular filter, the products underneath gets sorted accordingly.
I have used data-* attributes for filtering.
HTML:
<section id="store" class="store py-5">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize">our <strong class="banner-title ">store</strong></h1>
</div>
</div>
<!-- end of section title -->
<!--filter buttons -->
<div class="row">
<div class=" col-lg-8 mx-auto d-flex justify-content-around my-2 sortBtn flex-wrap">
all
cakes
cupcakes
sweets
doughnuts
</div>
</div>
<!--end of filter buttons -->
<!-- store items-->
<div class="row" id="store-items">
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
</div>
</section>
JS:
const storeItems = document.querySelectorAll('.store-item');
const filterBtn = document.querySelectorAll('.filter-btn');
function filterItems(){
filterBtn.forEach(function(btn){
const filter = btn.dataset.filter;
if (filter === "all"){
console.log(filter);
storeItems.forEach(function(item){
item.style.display = "block"
})
}
else if (filter === "cakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "cupcakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cupcakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "sweets"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('sweets')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "doughnuts"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('doughnuts')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
})
}
What happens is on clicking on a particular filter button, only the products having class="doughnuts" gets displayed and the rest sets to display:none.
To better explain there's a demo available here: https://codepen.io/sumayya_ishaq/pen/eYdQaRy

how to display selected div and hide others sibling div?

I want that all unselected div will disappear and will show me only the selected card. i have different card which ids are dynamic (default++) using loop and also i added affect that when use select div it chose red border over div.
I tried different method when i click on the selected div that selected div will remain the rest div will be disappeared.
//Showing border on the selected card
$('.selects').click(function() {
if ($('.selects.choice').length > 0) {
$('.choice').removeClass('choice');
$(this).addClass('choice');
} else {
$(this).addClass('choice');
}
});
.card{
margin:5px;
width:140px;
display: flex !important;
justify-content: center;
align-items:center;
}
#operatorImage >img {
width:100px;
height:50px;
}
.choice {
border: 3px #CA0B00 solid;
text-decoration: none;
}
.operator-card{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="default-0" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
<div id="default-3" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Nigira</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">MTN</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>

You can just toggle between siblings something like this:
$('.card-body').click(function() {
$('.card-body').not(this).hide();
});
.card {
margin: 5px;
width: 140px;
display: flex !important;
justify-content: center;
align-items: center;
}
#operatorImage>img {
width: 100px;
height: 50px;
}
.choice {
border: 3px #CA0B00 solid;
text-decoration: none;
}
.operator-card {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="default-0" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 ">
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 ">
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
</div>
</div>
</div>
</div>

Something like this?
var $selects = $('.selects');
$selects.click(function() {
$selects.not(this).removeClass('choice').hide();
$(this).addClass('choice');
});
just tested and it works... but you will have to remove this important in css:
display: flex !important;

how to create when the user click on products in left side details will be shown in right side

i have 6 products in left side div...when i click on product-1 only product-descript-1(details of product-1) will be shown in right side div and remaining details of products are hidden....
if i click on product-2 then only product-descript-2 (details of second product) is shown in the right side
and product-3 and prodcut4 and product-5 and product-6 are aslo same way
//actually i have 40 products
//suggest simple code
//instead of using this script any other simple way
<script type="text/javascript">
$(document).ready(function()
{
$("#product-1").click(function(){
$("#product-descript1").show()
$("#product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6).hide()
});
}
</script>
#product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>products</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/xzoom.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.elevatezoom.js"></script> -->
<script type="text/javascript" src="js/xzoom.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<!--left div-->
<div class="col-lg-8 col-md-8 text-center">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-1">
<div class="pic">
<img class="product-img" src="images/t-shirt-1.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-2">
<div class="pic">
<img class="product-img" src="images/t-shirt-2.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-3">
<div class="pic">
<img class="product-img" src="images/t-shirt-3.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-4">
<div class="pic">
<img class="product-img" src="images/t-shirt-4.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-5">
<div class="pic">
<img class="product-img" src="images/t-shirt-5.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-6">
<div class="pic">
<img class="product-img" src="images/t-shirt-6.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
</div><!--lg-8-->
<!--right-div-->
<div class="col-lg-4 col-md-4">
<div class="col-lg-12 col-md-12" id="product-descript1">
<div class="product-img">
<img src="images/bt-shirt-1.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript2">
<div class="product-img">
<img src="images/bt-shirt-2.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript3">
<div class="product-img">
<img src="images/bt-shirt-3.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript4">
<div class="product-img">
<img src="images/bt-shirt-4.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript5">
<div class="product-img">
<img src="images/bt-shirt-5.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript6">
<div class="product-img">
<img src="images/bt-shirt-6.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
</div><!--lg-4-->
</body>
</html>

Here's e simple example how to get this done using JavaScript:
let i, products = document.getElementsByClassName('product'); // get all products
for (i = 0; i < products.length; i++) {
products[i].onclick = function() {
showInfo(this.id)
}; // add onclick Event to all products
}
function showInfo(id) {
let x, infos = document.getElementsByClassName('info'); // get all infos
for (x = 0; x < infos.length; x++) {
(infos[x].id === 'info-' + id) ? infos[x].className = 'info': infos[x].className = 'info hidden'; // Show info for clicked product only
}
}
.flex {
display: flex;
width: 100%;
}
.products {
width: 140px;
}
.infos {
padding: 10px;
margin: 10px;
background: grey;
width: 100%;
}
.product {
background: grey;
color: #fff;
margin: 10px;
padding: 10px;
width: 100px;
}
.info {
width: 100%;
color: #fff;
}
.hidden {
display: none;
}
<div class="flex">
<div class="products">
<div class="product" id="product1">
Product 1
</div>
<div class="product" id="product2">
Product 2
</div>
<div class="product" id="product3">
Product 3
</div>
<div class="product" id="product4">
Product 4
</div>
</div>
<div class="infos">
<div class="info" id="info-product1">
Info 1
</div>
<div class="info hidden" id="info-product2">
Info 2
</div>
<div class="info hidden" id="info-product3">
Info 3
</div>
<div class="info hidden" id="info-product4">
Info 4
</div>
</div>
</div>

You need to use class selector so you can target all the products, for example you can use add class="product" to each product div (at the same level as product-ID ) then once the user clicks on any item with that class hide all the items with that class and show only the currently clicked one.
Here is a simple complete working solution:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="product" id="product_1">
<b>product1</b>
<p class="details">details</p>
</div>
<div class="product" id="product_2">
<b>product2</b>
<p class="details">details</p>
</div>
<div class="product" id="product_3">
<b>product3</b>
<p class="details">details</p>
</div>
<script>
$(function(){
$('.product').on('click',function(e){
$('.details').hide();
$(this).find('.details').show();
});
});
</script>
Try to understand this solution and let me know if something is unclear,
Otherwise if you find it helpful don't forget to accept this answer.

A simple working solution could to load a file into a <div>.
See below snippet. This calls an external file from your directory to be set into the <div class="Product"></div>. I have already set a filepath there via SSI so there will be content then on load (maybe content telling the user to select a product in the menu).
The menu could be anything - images, text etc. - I have just used text for this example.
For this to adjust your needs your need to edit this:
Product1: Change this to your unique ID you use in the menu.
DivToContent: Change this to the CLASS-name of the <div> you want your content.
PathTo/File1.html: Change this to the path of your file.
charset=ISO-8859-1: Change this to the charset your use
I have not provided any CSS as you may style all classes as you wish. All ID-tags are for scripts only. This can be provided with a neat transition if you want that.
For more products than six, just copy/paste below and edit the numbers.
$('#Product1').click(function(e) {
$('.DivToContent').load('PathTo/File1.html');
e.preventDefault();
});
$(function() {
$('#Product1').click(function(e) {
$('.DivToContent').load('PathTo/File1.html');
e.preventDefault();
});
$('#Product2').click(function(e) {
$('.DivToContent').load('PathTo/File2.html');
e.preventDefault();
});
$('#Product3').click(function(e) {
$('.DivToContent').load('PathTo/File3.html');
e.preventDefault();
});
$('#Product4').click(function(e) {
$('.DivToContent').load('PathTo/File4.html');
e.preventDefault();
});
$('#Product5').click(function(e) {
$('.DivToContent').load('PathTo/File5.html');
e.preventDefault();
});
$('#Product6').click(function(e) {
$('.DivToContent').load('PathTo/File6.html');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});
// Handler to wrap a SPAN around what is selected
$(document).on('click', '.DivMenu a', function(e) {
$('.DivMenu .productselected a').unwrap( )
$(this).wrap("<span class='productselected'></span>");
});
<div class="DivMenu">
<p>
<a id="Product1" href="javascript:;">Product1</a> |
<a id="Product2" href="javascript:;">Product2</a> |
<a id="Product3" href="javascript:;">Product3</a> |
<a id="Product4" href="javascript:;">Product4</a> |
<a id="Product5" href="javascript:;">Product5</a> |
<a id="Product6" href="javascript:;">Product6</a>
</p>
</div>
<div class="DivToContent"><!--#include virtual="PathTo/File0.html"--></div>

Categories

Resources