在不使用 java 脚本的情况下隐藏我画廊中某些内容的最佳方法是什么？

Question

我目前正在使用 java 脚本显示更多隐藏更少按钮但问题是我不能在同一页面中使用相同的按钮我确实更改了 ID 但仍然对我不起作用我可能错过了使用 java 因为我不是那个专家但是我想要一些不同于 java 脚本的东西与我现在使用的脚本具有相同的功能我也希望它在 col 网格上完美工作所以我不想要订单被打乱非常感谢您的帮助

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>

Answer 1

Bootstrap 中有一个非常基本的 Show/Hide 功能，根本不需要额外的 JS。该功能称为 Collapse。这是它的最基本版本，您可以将其复制到您的页面（只要您也调用 Bootstrap 5 JS）....

<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>

如果您想添加更多内容或稍微编辑一下，这里是文档。 https://getbootstrap.com/docs/5.0/components/collapse/

在不使用 java 脚本的情况下隐藏我画廊中某些内容的最佳方法是什么？

What is the best way to hide some of the content in my gallery without utilizing java script?

javascript

css

show-hide

bootstrap-5