how to make a see more button - Jquery

YuriAlif
April 26, 2023
254 views
0 votes
2 Answers

I want to make it there are 3 images and when I click on see more button it will show 4 images.
I have made html, css and javascript, but the image that is immediately displayed is 4. which should display 3 and when clicked see more will display 4 images.
so there are many pictures, but only 3 pictures are displayed, and when you click the see more button it will display other pictures

 let loadMoreBtn = document.querySelector('.load-more');
    let currentItem = 3;

    loadMoreBtn.onclick = () =>{
    let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
    for (var i = currentItem; i < currentItem + 3; i++){
      boxes[i].style.display = 'inline-block';
    }
    currentItem += 3;

    if(currentItem >= boxes.length){
      loadMoreBtn.style.display = 'none';
    }
}

#Hobby{
    padding: 50px 0;
}
.hobby-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px;
}
.hobby{
    border-radius: 10px;
    position: relative;
}
.hobby img{
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}
.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.layer a{
    margin-top: 15px;
    color: #31c48d;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}

<div id="Hobby">
    <div class="container">
        <div class="hobby-list">
            <div class="hobby">
                <img src="Assets/hobby_1.png">
                    <div class="layer">
                        <h3>Playing soccer</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_2.png">
                    <div class="layer">
                        <h3>Playing game</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_3.png">
                    <div class="layer">
                        <h3>Playing basketball</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_4.png">
                    <div class="layer">
                        <h3>Painting</h3><br>
                    </div>
            </div>
        </div>
        <div class="load-more">See more</div>
    </div>
</div>

Answers

First of all add class display: none to the image you donot want to display at first load

See the code below
the logic to show the image on see more button was also not correct so I have changed that also

let loadMoreBtn = document.querySelector('.load-more');
    let currentItem = 3;

    loadMoreBtn.onclick = () =>{
    let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
    for (var i = currentItem; i < boxes.length; i++){
      boxes[i].style.display = 'inline-block';
    }
    currentItem += 3;

    if(currentItem >= boxes.length){
      loadMoreBtn.style.display = 'none';
    }
}

#Hobby{
    padding: 50px 0;
}
.hobby-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px;
}
.hobby{
    border-radius: 10px;
    position: relative;
}
.hobby img{
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}
.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.layer a{
    margin-top: 15px;
    color: #31c48d;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}

.display-none {
    display: none;
}

<div id="Hobby">
    <div class="container">
        <div class="hobby-list">
            <div class="hobby">
                <img src="Assets/hobby_1.png">
                    <div class="layer">
                        <h3>Playing soccer</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_2.png">
                    <div class="layer">
                        <h3>Playing game</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_3.png">
                    <div class="layer">
                        <h3>Playing basketball</h3><br>
                    </div>
            </div>
            <div class="hobby display-none">
                <img src="Assets/hobby_4.png">
                    <div class="layer">
                        <h3>Painting</h3><br>
                    </div>
            </div>
        </div>
        <div class="load-more">See more</div>
    </div>
</div>

Hide first the image you don’t want to show and add make it visible once user click the button to See more.

function loadMore() {
  var dots = document.getElementById("dots");
  var moreImage = document.getElementById("more");
  var loadBtn = document.getElementById("load-more");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    loadBtn.innerHTML = "See more"; 
    moreImage.style.display = "none";
  } else {
    dots.style.display = "none";
    loadBtn.innerHTML = "See less"; 
    moreImage.style.display = "inline";
  }
}

#Hobby{
   padding: 50px 0;
}
.hobby-list{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-gap: 40px;
}
.hobby{
   border-radius: 10px;
   position: relative;
}
.hobby img{
   width: 100%;
   border-radius: 10px;
   display: block;
   transition: transform 0.5s;
}
.layer{
   width: 100%;
   height: 0;
   background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
   position: absolute;
   left: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 0 40px;
   text-align: center;
   font-size: 14px;
   transition: height 0.5s;
}

.layer a{
   margin-top: 15px;
   color: #31c48d;
   text-decoration: none;
   font-size: 18px;
   line-height: 60px;
   background: #fff;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   text-align: center;
}

.display-none {
   display: none;
}
#more {
   display: none;
}
#dots{
   font-weight: bold;
   font-size: 32px;
}
#load-more{
   height: 30px;
   width: 100px;
   text-align: center;
   background-color: gray;
}
#load-more:hover{
   cursor: pointer;
}

<div id="Hobby">
   <div class="container">
         <div class="hobby-list">
            <div class="hobby">
               <img src="Assets/hobby_1.png">
                     <div class="layer">
                        <h3>Playing soccer</h3><br>
                     </div>
            </div>
            <div class="hobby">
               <img src="Assets/hobby_2.png">
                     <div class="layer">
                        <h3>Playing game</h3><br>
                     </div>
            </div>
            <div class="hobby">
               <img src="Assets/hobby_3.png">
                     <div class="layer">
                        <h3>Playing basketball</h3><br>
                     </div>
            </div>
            <span id="dots">&#187;</span>
            <span id="more">
               <div class="hobby">
                  <img src="Assets/hobby_4.png">
                     <div class="layer">
                        <h3>Painting</h3><br>
                     </div>
               </div>
            </span>
         </div>
         <div onclick="loadMore()" class="load-more" id="load-more">See more</div>
   </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

how to make a see more button – Jquery

Answers