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>>Solution :
There is a very basic Show/Hide function in Bootstrap. It’s called Collapse. Here is the most basic version of it which you can just copy over to your page (as long as you are calling Bootstrap 5 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/