Click to reveal additional images once the "show more" button is pressed

Question

Click to reveal additional images once the "show more" button is pressed

Hey there! I'm currently working on implementing a feature where, upon clicking "show more", 3 images will be displayed. And if the user clicks again, another set of 3 images will appear, and so on. I seem to be facing some difficulties with the JavaScript part of it. Any help in identifying the error would be greatly appreciated.

You can find my code on fiddle here

$(document).ready(function () {
                image_x = $(".handler .col-md-4").size();
                x=1;
                $('.handler .col-md-4:lt('+x+')').show();
                $('#loadMore').click(function () {
                    x= (x+5 <= image_x) ? x+1 : image_x;
                    $('.handler .col-md-4:lt('+x+')').show();
                });
                $('#showLess').click(function () {
                    x=(x-5<0) ? 3 : x-5;
                    $('.handler .col-md-4').not(':lt('+x+')').hide();
                });
            });

.col-md-4 {
                width: 100%;
                text-align: center;
            }
            .col-md-6 {
                width: 100%;
                text-align: center;
            }
            #loadmore {

             border: 1px solid;
             padding: 20px;
            }
            #loadless {

             border: 1px solid;
             padding: 20px;
            }

<div class="handler">
            <div class="col-md-4">
               <div class="livery-article">
                  <a href="/blogs/good-company/72810435-hello-america">
                     <img class="livery-article-image"
                          src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
                  </a>
               </div>  
            </div>
            <br />
            <div class="col-md-4">
               <div class="livery-article">
                  <a href="/blogs/good-company/72810435-hello-america">
                     <img class="livery-article-image"
                          src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
                  </a>
               </div>  
            </div>
            <br />
            <div class="col-md-4">
               <div class="livery-article">
                  <a href="/blogs/good-company/72810435-hello-america">
                     <img class="livery-article-image"
                          src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
                  </a>
               </div>  
            </div>
            <br />
            <div class="col-md-4">
               <div class="livery-article">
                  <a href="/blogs/good-company/72810435-hello-america">
                     <img class="livery-article-image"
                          src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
                  </a>
               </div>  
            </div>
            <br />
            </div>
                
                <br />
                <br />
                <div class="col-md-6">
                    <a href="#" id="loadmore">show more image</a>
                    <a href="#" id="loadless">show more image</a>
                </div>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />

javascript jquery html css

Answer 1

Answer №1

The code needed some minor adjustments. The id used in the HTML and jQuery were not aligned properly. I have made changes to update displays by toggling the CSS display.

$(document).ready(function () {
   x=1;
   $('.handler li:lt('+x+')').css('display','block');
   $('.handler li').not(':lt('+x+')').css('display','none');
});
$('#loadMore').click(function () {
   image_x = $(".handler li").size();
   x= (x+1 <= image_x) ? x+1 : image_x;
   $('.handler li:lt('+x+')').css('display','block');
});
$('#loadLess').click(function () {
   image_x = $(".handler li").size();
   x=(x-1<=0) ? 3 : x-1;
   $('.handler li').not(':lt('+x+')').css('display','none');
});

For more information, please check out: http://fiddle.jshell.net/n8f983cb/7/

Answer 2

The code needed some minor adjustments. The id used in the HTML and jQuery were not aligned properly. I have made changes to update displays by toggling the CSS display.

$(document).ready(function () {
   x=1;
   $('.handler li:lt('+x+')').css('display','block');
   $('.handler li').not(':lt('+x+')').css('display','none');
});
$('#loadMore').click(function () {
   image_x = $(".handler li").size();
   x= (x+1 <= image_x) ? x+1 : image_x;
   $('.handler li:lt('+x+')').css('display','block');
});
$('#loadLess').click(function () {
   image_x = $(".handler li").size();
   x=(x-1<=0) ? 3 : x-1;
   $('.handler li').not(':lt('+x+')').css('display','none');
});

For more information, please check out: http://fiddle.jshell.net/n8f983cb/7/

Answer 3

Answer №2

Check out the revised code

After reviewing your code, I noticed several logic problems and typos in class names.

Therefore, I made some adjustments to your code. Please see if these changes meet your requirements.

Appreciate the opportunity to help (:

Answer 4

Check out the revised code

After reviewing your code, I noticed several logic problems and typos in class names.

Therefore, I made some adjustments to your code. Please see if these changes meet your requirements.

Appreciate the opportunity to help (:

Answer 5

Answer №3

Although there were some mistakes in your code, such as using incorrect id's and other issues, I won't dwell on the minor typos and syntax errors that may not be useful knowledge for others in the future. Instead, I will show you my approach to solving the problem.

I recommend creating an object that contains a function for each action.

The showMore function should increment the counter and display the appropriate items.
The showLess function should decrement the counter and hide the appropriate items.

Create a single function that shows or hides items based on the counter value, and shows or hides each action depending on whether it can be used or not. Call this function at the end of each action defined earlier.

Add a delegated event listener to the parent element of the controls, find the correct function based on the id, and execute it. I included a fallback in case the code changes and can no longer locate the correct function.

I've simplified the HTML and utilized placeholder images to reduce the size of the demo below. However, it is compatible with your original HTML structure.

$(document).ready(function() {
    var images = $(".handler > div").hide(), x = 1;
    var showMore = $('#showMore');
    var showLess = $('#showLess');
    var funcs = {
       'showMore': function() { ++x; show(); },
       'showLess': function() { --x; show(); }
    }
    $('.controls').on('click', 'a', function(e){
        return (funcs[e.target.id] || function(){})(), false;
    });
    function show() {
        images.hide().filter(function(i){ return i < (x * 3); }).show();
        showMore.show().filter(function(){ return !images.is(':hidden'); }).hide();
        showLess.show().filter(function(){ return x === 1; }).hide();
    }
    show();
});

.handler { width: 600px; } .handler > div { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="handler"><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/abstract"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/business"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/transportation"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/sports"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div></div><br /><div class="col-md-6 controls"><a href="#" id="showMore">show more images</a> <a href="#" id="showLess">show less images</a></div>

Answer 6

Although there were some mistakes in your code, such as using incorrect id's and other issues, I won't dwell on the minor typos and syntax errors that may not be useful knowledge for others in the future. Instead, I will show you my approach to solving the problem.

I recommend creating an object that contains a function for each action.

The showMore function should increment the counter and display the appropriate items.
The showLess function should decrement the counter and hide the appropriate items.

Create a single function that shows or hides items based on the counter value, and shows or hides each action depending on whether it can be used or not. Call this function at the end of each action defined earlier.

Add a delegated event listener to the parent element of the controls, find the correct function based on the id, and execute it. I included a fallback in case the code changes and can no longer locate the correct function.

I've simplified the HTML and utilized placeholder images to reduce the size of the demo below. However, it is compatible with your original HTML structure.

$(document).ready(function() {
    var images = $(".handler > div").hide(), x = 1;
    var showMore = $('#showMore');
    var showLess = $('#showLess');
    var funcs = {
       'showMore': function() { ++x; show(); },
       'showLess': function() { --x; show(); }
    }
    $('.controls').on('click', 'a', function(e){
        return (funcs[e.target.id] || function(){})(), false;
    });
    function show() {
        images.hide().filter(function(i){ return i < (x * 3); }).show();
        showMore.show().filter(function(){ return !images.is(':hidden'); }).hide();
        showLess.show().filter(function(){ return x === 1; }).hide();
    }
    show();
});

.handler { width: 600px; } .handler > div { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="handler"><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/abstract"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/business"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/transportation"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/sports"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div></div><br /><div class="col-md-6 controls"><a href="#" id="showMore">show more images</a> <a href="#" id="showLess">show less images</a></div>

Click to reveal additional images once the "show more" button is pressed

Answer №1

Answer №2

Check out the revised code

Answer №3

Similar questions

Using Sequelize to Create/Post Data with Many-to-Many Relationship

Why is the PHP response always 0 even though AJAX JSON data is being sent correctly during Wordpress plugin development?

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

jQuery error: an unexpected token was encountered

Difficulty encountered when choosing and interacting with website button with the utilization of Python 3.5.1 and Selenium 2.53.2

Exploring the elimination of box shadow on elements that overlap

Tips for getting a jQuery click event to function properly within an AngularJS application

Having trouble with jQuery and Ajax POST requests

Animating the opacity of elements using jQuery and CSS

Managing the response from a dataless AJAX GET request

Add transparency to a component using CSS

Enzyme fails to locate text within a div even though it is present

Creating a private variable to perform a select_sum query

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Using a Button component as a TableCell in a material-ui Table

Utilize TypeScript functions within Angular applications

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

Gleaming R: Warning prompt or modal box input: invalid

Manipulate Nested Objects using an Array of Keys

What is the best way to apply overlays to customize a specific part of a single character while also accommodating dynamic width adjustments?