'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/[email protected]/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/[email protected]/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/[email protected]/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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|