To conceal the pointless columns, I`m the usage of a javascript toggle textual content on my gallery filter, which goes flawlessly. However, the columns amplify each time I refresh the page, and I need to click on display all then conceal all to get it to work. And the cause I did rows is if I insert the showmore identityentification withinside the center of the columns, when I press display all, they’ll show one column on every line, but on this technique all of the columns will show normally. I attempted converting the show cost withinside the javascript to many different values, however it’s miles nevertheless now no longer running properly. Do you’ve got got any pointers for the way to clear up this?
function togglesec1() {
var showMoreText = document.getElementById("showmore");
var buttonText = document.querySelector("#moreBtn p");
var moreIcon = document.querySelector("#moreBtn img");
if (startsec.style.display === "none") {
showMoreText.style.display = "none";
startsec.style.display = "inline";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('lesser');
moreIcon.classList.remove('lesser');
} else {
showMoreText.style.display = "inline";
startsec.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('lesser');
moreIcon.classList.add('lesser');
}
} <head>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon" />
<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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section id="work">
<div class="container-fluid clientbox text-center py-5">
<div class="row">
<div class="col-12 col-md-12 col-lg-12 text-center">
<ul>
<li class="list-inline-item active" data-filter="all">A</li>
<li class="list-inline-item" data-filter="B">B</li>
<li class="list-inline-item" data-filter="C">C</li>
<li class="list-inline-item" data-filter="D">D</li>
<li class="list-inline-item" data-filter="M">M</li>
<li class="list-inline-item" data-filter="UI">U</li>
<li class="list-inline-item" data-filter="CO">CC</li>
</ul>
</div>
</div>
<div class="row g-0">
<div class="clients C col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>C</P></figcaption>
<figcaption class="product-desc2"><p>H</p></figcaption>
</figure>
</a>
</div>
<div class="clients B D C CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/36/268/png-transparent-ballpoint-pen-stylus-fountain-pen-waterman-pens-pen-pen-advertising-rollerball-pen.png" alt="Logo">
<figcaption class="product-desc"><P>b</P></figcaption>
<figcaption class="product-desc2"><p>k</p></figcaption>
</figure>
</a>
</div>
<div class="clients B C D M U CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc"><P>n</P></figcaption>
<figcaption class="product-desc2"><p>P</p></figcaption>
</figure>
</a>
</div>
<div class="clients B C D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>B</P></figcaption>
<figcaption class="product-desc2"><p>G</p></figcaption>
</figure>
</a>
</div>
</div>
<div id="startsec"></div>
<div id="showmore">
<div class="row g-0">
<div class="clients B CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc"><P>N</P></figcaption>
<figcaption class="product-desc2"><p>g</p></figcaption>
</figure>
</a>
</div>
<div class="clients D B C M col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>N</P></figcaption>
<figcaption class="product-desc2"><p>s</p></figcaption>
</figure>
</a>
</div>
<div class="clients B UI col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://esquilo.io/png/thumb/OQQMxyuwyKmDwp0-Musical-Vector-Acoustic-Guitar-PNG.png" alt="Logo">
<figcaption class="product-desc"><P>BS</P></figcaption>
<figcaption class="product-desc2"><p>l</p></figcaption>
</figure>
</a>
</div>
<div class="clients CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>CN</P></figcaption>
<figcaption class="product-desc2"><p>C</p></figcaption>
</figure>
</a>
</div>
<div class="clients D col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc"><P>d</P></figcaption>
<figcaption class="product-desc2"><p>T</p></figcaption>
</figure>
</a>
</div>
<div class="clients B D col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>Bl</P></figcaption>
<figcaption class="product-desc2"><p>E</p></figcaption>
</figure>
</a>
</div>
<div class="clients B D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>BN</P></figcaption>
<figcaption class="product-desc2"><p>S</p></figcaption>
</figure>
</a>
</div>
<div class="clients B C D M col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>B</P></figcaption>
<figcaption class="product-desc2"><p>I</p></figcaption>
</figure>
</a>
</div>
<div class="clients B M C D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>N</P></figcaption>
<div class="product-desc2"><p>o</p></div>
</figure>
</a>
</div>
<div class="clients C B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>CAG</P></figcaption>
<figcaption class="product-desc2"><p>Jr</p></figcaption>
</figure>
</a>
</div>
<div class="clients B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>Brl</P></figcaption>
<figcaption class="product-desc2"><p>Sl</p></figcaption>
</figure>
</a>
</div>
<div class="clients B CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>Bn</P></figcaption>
<figcaption class="product-desc2"><p>SP</p></figcaption>
</figure>
</a>
</div>
<div class="clients B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>B</P></figcaption>
<figcaption class="product-desc2"><p>Wc</p></figcaption>
</figure>
</a>
</div>
</div>
</div>
<button onclick="togglesec1()" id="moreBtn">
<p class="pink">Show More</p>
<img class="showmore" src="./images/load-more.png" alt="">
</button>
</div>
</section>
<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>$(document).ready(function (){$('.list-inline-item').click(function(){const value = $(this).attr('data-filter');if(value == 'all'){$('.clients').show('1000');}else{ $('.clients').not('.'+value).hide('1000');$('.clients').filter('.'+value).show('1000');}$(this).addClass('active').siblings().removeClass('active')})})</script>
</body>