I’m attempting to use the same ID, but it’s not working. I duplicated the script and added an extra character to make it unique, but it didn’t work. Also, when I show the hidden columns (“I am using bootstrap 5 col grid”), the images display inline, and I want them to match the grid. I altered the display value in the script, and tried many other values, but none of them work; they all display inline.Last question, if you look at my code, I’m using a down arrow png just to make it look nice, but when you click it, the show less button displays the same png icon, which is logical, but I want to change it to another png that shows an up arrow, but I’m not sure how to do it. I figured out how to change the color of the show less button, but not the image/icon arrow.Thank you very much for any assistance.
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton p");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-column-group";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less')
} else {
showMoreText.style.display = "table-column-group";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less')
}
}.pink{
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton{
background-color:transparent;
border-color: transparent;
}
.less{
color: #FF7B5F;
}<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<container>
<div id="startpoint"></div>
<div id="more">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" width="150" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" width="150" alt="Logo">
<figcaption class="product-desc"><P>text</P></figcaption>
<figcaption class="product-desc2"><h4>text</h4></figcaption>
</figure>
</a>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p>
<img class="more" src="./images/downarrow.png" alt="">
</button>
</div>
</div>
<section class="team text-center bg-dark py-1">
<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>
</container>
</body>
</html>