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 >
<div >
<div >
<ul>
<li data-filter="all">A</li>
<li data-filter="B">B</li>
<li data-filter="C">C</li>
<li data-filter="D">D</li>
<li data-filter="M">M</li>
<li data-filter="UI">U</li>
<li data-filter="CO">CC</li>
</ul>
</div>
</div>
<div >
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption ><P>C</P></figcaption>
<figcaption ><p>H</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 ><P>b</P></figcaption>
<figcaption ><p>k</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption ><P>n</P></figcaption>
<figcaption ><p>P</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption ><P>B</P></figcaption>
<figcaption ><p>G</p></figcaption>
</figure>
</a>
</div>
</div>
<div id="startsec"></div>
<div id="showmore">
<div >
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption ><P>N</P></figcaption>
<figcaption ><p>g</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 ><P>N</P></figcaption>
<figcaption ><p>s</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://esquilo.io/png/thumb/OQQMxyuwyKmDwp0-Musical-Vector-Acoustic-Guitar-PNG.png" alt="Logo">
<figcaption ><P>BS</P></figcaption>
<figcaption ><p>l</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption ><P>CN</P></figcaption>
<figcaption ><p>C</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption ><P>d</P></figcaption>
<figcaption ><p>T</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 ><P>Bl</P></figcaption>
<figcaption ><p>E</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption ><P>BN</P></figcaption>
<figcaption ><p>S</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 ><P>B</P></figcaption>
<figcaption ><p>I</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 ><P>N</P></figcaption>
<div ><p>o</p></div>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption ><P>CAG</P></figcaption>
<figcaption ><p>Jr</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption ><P>Brl</P></figcaption>
<figcaption ><p>Sl</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption ><P>Bn</P></figcaption>
<figcaption ><p>SP</p></figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption ><P>B</P></figcaption>
<figcaption ><p>Wc</p></figcaption>
</figure>
</a>
</div>
</div>
</div>
<button onclick="togglesec1()" id="moreBtn">
<p >Show More</p>
<img 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>CodePudding user response：
I am still not completely sure I understand your question. However if you are looking just to have the showmore part hidden you can simple add a style display: none to that element and your toggle will work just fine.
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');
}
}#showmore{
display: none;
}<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 >
<div >
<div >
<ul>
<li data-filter="all">A</li>
<li data-filter="B">B</li>
<li data-filter="C">C</li>
<li data-filter="D">D</li>
<li data-filter="M">M</li>
<li data-filter="UI">U</li>
<li data-filter="CO">CC</li>
</ul>
</div>
</div>
<div >
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption >
<P>C</P>
</figcaption>
<figcaption >
<p>H</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 >
<P>b</P>
</figcaption>
<figcaption >
<p>k</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption >
<P>n</P>
</figcaption>
<figcaption >
<p>P</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption >
<P>B</P>
</figcaption>
<figcaption >
<p>G</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div id="startsec"></div>
<div id="showmore">
<div >
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption >
<P>N</P>
</figcaption>
<figcaption >
<p>g</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 >
<P>N</P>
</figcaption>
<figcaption >
<p>s</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://esquilo.io/png/thumb/OQQMxyuwyKmDwp0-Musical-Vector-Acoustic-Guitar-PNG.png" alt="Logo">
<figcaption >
<P>BS</P>
</figcaption>
<figcaption >
<p>l</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption >
<P>CN</P>
</figcaption>
<figcaption >
<p>C</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption >
<P>d</P>
</figcaption>
<figcaption >
<p>T</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 >
<P>Bl</P>
</figcaption>
<figcaption >
<p>E</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption >
<P>BN</P>
</figcaption>
<figcaption >
<p>S</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 >
<P>B</P>
</figcaption>
<figcaption >
<p>I</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<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 >
<P>N</P>
</figcaption>
<div >
<p>o</p>
</div>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption >
<P>CAG</P>
</figcaption>
<figcaption >
<p>Jr</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption >
<P>Brl</P>
</figcaption>
<figcaption >
<p>Sl</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption >
<P>Bn</P>
</figcaption>
<figcaption >
<p>SP</p>
</figcaption>
</figure>
</a>
</div>
<div >
<a href="#">
<figure >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption >
<P>B</P>
</figcaption>
<figcaption >
<p>Wc</p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<button onclick="togglesec1()" id="moreBtn">
<p >Show More</p>
<img 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>