why can't I use the same javascript toggle button twice? - javascript

I'm attempting to utilize this javascript toggle button in two separate parts on the same page, but I'm having trouble. I tried altering the id as well, but it didn't work. Is it impossible to complete it, or am I overlooking something? I am not an expert in javascript and am a complete novice, so any help would be greatly appreciated.
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
function toggleText2() {
var showMoreText2 = document.getElementById("more2");
var buttonText2 = document.querySelector("#moreButton2 span");
var moreIcon2 = document.querySelector("#moreButton2 img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less2');
moreIcon.classList.remove('less2');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less2');
moreIcon.classList.add('less2');
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint2"></div>
<div id="more2">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText2()" id="moreButton2">
<span class="pink2">Show More</span>
<img class="more2" src="./images/load-more.png" alt="">
</button>
</div>
</div>


The correct way to do that:
document.querySelectorAll('button.moreButton').forEach(bt =>
{
let
moreItem = bt.closest('div.row').querySelector('div.more_items')
, spPink = bt.querySelector('span.pink')
;
bt.onclick =_=>
{
spPink.textContent = moreItem.classList.toggle('noDisplay') ? 'Show More' : 'Show Less'
}
})
.more_items.noDisplay {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="more_items">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button class="moreButton">
<span class="pink">Show Less</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="more_items">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button class="moreButton">
<span class="pink">Show Less</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>


You had some issues with the naming of your variables etc. (things coming up as undefined).
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
function toggleText2() {
var showMoreText2 = document.getElementById("more2");
var buttonText2 = document.querySelector("#moreButton2 span");
var moreIcon2 = document.querySelector("#moreButton2 img");
if (startpoint.style.display === "none") {
showMoreText2.style.display = "none";
startpoint.style.display = "table-cell";
buttonText2.innerHTML = "Show More";
buttonText2.classList.remove('less2');
moreIcon2.classList.remove('less2');
} else {
showMoreText2.style.display = "table-cell";
startpoint.style.display = "none";
buttonText2.innerHTML = "Show Less";
buttonText2.classList.add('less2');
moreIcon2.classList.add('less2');
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint2"></div>
<div id="more2">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText2()" id="moreButton2">
<span class="pink2">Show More</span>
<img class="more2" src="./images/load-more.png" alt="">
</button>
</div>
</div>
With that said, there are much cleaner ways of constructing this logic. For instance, you could parse the event and look for a certain parent or child to toggle. That way, you can utilize the same function as long as it's surrounded by the same html structure. You'd have to exchange the id's for classes however.

Related

What is the best way to hide some of the content in my gallery without utilizing java script?

i am currently using a java script show more hide less button but the problem i cant use the same button in same page i did change the id and still didn't work for me i might missed up with java cause i am not that expert but the thing i want somthing different than java script to have same functionaliy with the one i am using now also i want it to work perfectly on col grid so i dont want want the order to be messed up thanks a lot for any help
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
.pink{
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton{
background-color:transparent;
border-color: transparent;
}
.less{
color: #FF7B5F;
}
img.more.less {
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Homepage</title>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- carusal slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="./css/style01.css">
</head>
<body>
<!-- Preloader -->
<div id="loader"></div>
<div id="content">
<div data-aos="fade-up" data-aos-duration="2000" data-aos-once='true' data-aos-easing="ease-in-out" class="row">
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
<div class="col-6 col-md-2 col-lg-2">
<img class="img-fluid" width="150" height="50" src="https://www.pinclipart.com/picdir/middle/193-1931067_pixel-clipart-finn-50-x-50-px-png.png" alt="">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="https://www.pngfind.com/pngs/m/93-936844_down-arrow-png-image-background-down-arrow-icon.png" width="150px" alt="">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>

There is a very basic Show/Hide function in Bootstrap with no need at all for extra JS. The feature is called Collapse. Here is the most basic version of it which you can copy over to your page (as long as you are calling Bootstrap 5 JS too)....
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
Show/Hide
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This panel is hidden by default but revealed when the user activates the Show/Hide link above.
</div>
</div>
And here are the docs if you want to add more or edit a little. https://getbootstrap.com/docs/5.0/components/collapse/

gallery selector using bootstrap does not work

Below is the HTML followed by JavaScript file called filter.js.
I am developing a gallery page on my website and i believe i am missing some selector id or something because when i check the page, none of the pictures change and none of the categories work. please can someone help me see what i'm missing. Thank You
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/filter.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Start about area -->
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</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="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation
Pipes</button>
</div>
<br/>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!--end about area -->
This is the javascript below
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
// $('.filter').removeClass('hidden');
$('.filter').show('1000');
}else{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});

"Can anyone Spot Error?" There is None atleast not in the code you posted , just Make sure you have the bootstrap and jquery working. The Rest of it seems to be working fine, i have changed the images so that you could see that the code is working
$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</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="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>

$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</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="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>

how to remove functionality of "ALL" button i want to show only rest categories instead of all. by default all images should now show when run the code.

Targeting next Image that is inside a col class

<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
I am trying to build an image gallery with arrows so you can press the next arrow and display next image (like all basic sliders). Since I just learned some basics of bootstrap I decided to use bootstrap for this project, however, I had to put every image in a separate col class (please notify me if this is not a good way). Since every image is in nested in another col class when I use this.nextElementSibling in the event listener I get null as a return. Is there any way that I can target the next image please?

You can use jQuery for this since you already using it for bootstrap
$(this).parent().siblings().find("img")
You can use Javascript as well as follow
this.parentElement.nextElementSibling.children[0];
Where children[0] means first child element

You can use document.querySelectorAll and access your nodes via index.
Small example
const items = document.querySelectorAll('.row .col-12'); // all .col-12 notes inside .row
let currentIndex = 0; // current item index
// refresh icons and set border color
const refreshItems = () => {
items.forEach((item, index) => {
item.style.border = `1px solid ${index === currentIndex ? '#f00' : '#0f0'}`;
});
}
// init
refreshItems();
// simple call by index
// items[5].style.border = '1px solid #0f0';
// Add click event to .prev button and increase current index 1
document.querySelector('.next').addEventListener('click', () => {
currentIndex += 1;
refreshItems();
});
// Add event to .prev button and decrease current index by 1
document.querySelector('.prev').addEventListener('click', () => {
currentIndex -= 1;
refreshItems();
})
<button class="next">next</button>
<button class="prev">prev</button>
<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
</div>
</div>
Lastly, add transforms, transitions, overflows, and index checks, and your slider is ready.

How to display sorted divs into HTML

I'm working with this piece of JS to sort a group of divs, with the code that I have, I able to get the values(id) of each div and I push the values into an array, then I sort the array.
The problem is that I don't know how to display the sorted divs again into the screen. I tried this but it only displays the id value, is there a way to display the sorted divs ?
for (var j=0; j<portfolio.length; j++)
{
$('#portfolio-divs').append(portfolio[j]);
}
Full Code
<br><br>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 2</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 1</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 4</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 3</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 6</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 5</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 8</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 7</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
</div> <!-- ./row -->
</div>
JS:
var x = document.getElementsByClassName('pss');
var portfolio = new Array;
for(var i=0; i<x.length; i++)
{
var y = document.getElementsByClassName('pss')[i].getAttribute('id');
portfolio.push(y);
}
portfolio.sort();
for (var j=0; j<portfolio.length; j++)
{
$('#portfolio-divs').append(portfolio[j]);
}

You want to create an object from the ID string.
$('#portfolio-divs').append($('#'+portfolio[j]));
var x = document.getElementsByClassName('pss');
var portfolio = new Array;
for (var i = 0; i < x.length; i++) {
var y = document.getElementsByClassName('pss')[i].getAttribute('id');
portfolio.push(y);
}
portfolio.sort();
for (var j = 0; j < portfolio.length; j++) {
$('#portfolio-divs').append($('#'+portfolio[j]));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 2</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 1</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 4</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 3</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 6</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 5</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 8</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 7</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
</div>
<!-- ./row -->
</div>
<h1>portfolio-divs</h1>
<div id="portfolio-divs"></div>

You can just change html content of parent div with sorted content using html() DEMO.
var sorted = $('.pss').sort(function(a, b) {
return $(a).attr('id').localeCompare($(b).attr('id'))
})
$('.row').html(sorted)
In case you have multiple elements you want to sort, in this case multiple .rows then you need to loop each one and run sort inside DEMO.
$('.row').each(function() {
var sorted = $(this).find('.pss').sort(function(a, b) {
return $(a).attr('id').localeCompare($(b).attr('id'))
})
$(this).html(sorted)
})

how to toggle each div

I have a question for toggle, I wrote a function which when I hover some image then that image was change and click then div will display and other image click:hover acting is same close display before selected
this is html code
<div class="bs-example" data-example-id="simple-thumbnails">
<div class="row">
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_ezer"
src="/img/intro_ezer_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_coloris"
src="/img/intro_coloris_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_galaxia"
src="/img/intro_galaxia_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 intro_ezer_detail intro">
<img class="intro_margot_main"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_coloris_detail intro">
<img class="intro_nanobuble"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_galaxia_detail intro">
<img class="intro_teatoxy"
src="/img/intro_ezer.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img
class="intro_margot" src="/img/intro_margot_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img
class="intro_nanobuble"
src="/img/intro_nanobuble_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img class="intro_teatoxy"
src="/img/intro_teatoxy_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row detail">
<div class="col-xs-12 col-md-3 intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_nanobuble_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_teatoxy_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
</div>
</div>
javascript
var className = "";
var toggleImg = "";
$('div').find('img').hover(function() {
className = $(this).attr('class');
this.src = '/img/' + className + '_hover.png';
}, function() {
this.src = '/img/' + className + '_main.png';
}).click(function(e) {
toggleImg = className + "_detail";
e.preventDefault(); $('.intro').hide()
$("."+className+"_detail").show();
})
How can I do?

You should use .each
Check the example below.
HTML :
<div>
<img alt="chrome" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">
</div>
<div>
<img alt="firefox" src="https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg">
</div>
JS :
$('div img').each(function() {
$(this).click(function() {
alert($(this).attr('alt'));
});
});

Categories

Resources