Sunday

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

3:28 PM bootstrap-5, css, javascript, show-hide No comments

Issue

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

Solution

There is a very basic Show/Hide function in Bootstrap with no need at all for extra JS. The feature is called Collapse. Here is the most basic version of it which you can copy over to your page (as long as you are calling Bootstrap 5 JS too)....

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

And here are the docs if you want to add more or edit a little. https://getbootstrap.com/docs/5.0/components/collapse/

Answered By - Cute Code Rob

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

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

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels