jQuery: show on click, hide on click, and loop infinitely

Question

To start off, there is one row of images with a "See more" button underneath it.
When the "See more" button is clicked, a second row of images is added after the first row of images, and the "See more" button is replaced with a "See less" button.
When the "See less" button is clicked, the second row of images that was added in the step above gets removed, and the "See less" button gets removed.

Question: how can I make it so that this is an infinite loop, where the "See more" button would then reappear after step 3, thus allowing repetition?

Here's the jQuery:

    $(document).ready(function() {
        //Hides the new row to prepare for click event
        $('.images-section').children('.new-row').hide();
        //Creating variables for see more/less buttons
        var more = $('.images-button-more');
        var less = $('.images-button-less'); 
        less.hide();
        //Add new row on click of see more button
        more.on('click', function() {
            $('.images-section').children('.new-row').show(function() {
                $(this).insertAfter('.old-row').slideDown('1000');
                more.fadeOut('slow', function() {
                    less.insertAfter(more).fadeIn('slow');
                });
            });
        });
        //Remove new row on click of see less button
        less.on('click', function() {
            $('.new-row').slideUp('1000', function() {
                less.fadeOut('slow');
            });
        });
    });

Here's the HTML:

<section class="no-padding remove-tablet">
        <div class="container-fluid images-section">
            <div class="row no-gutter old-row">
              <div class="col-lg-2 col-sm-6">
                    <img src="img/ant-johns.jpg" class="img-responsive" alt="Ant Johns" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/white-guy.jpg" class="img-responsive" alt="Arnold Jr" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/enrique-double-bi.jpg" class="img-responsive" alt="Enrique Double Bi" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/anthony-b.jpg" class="img-responsive" alt="Anthony B" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/manny-most-muscular.jpg" class="img-responsive" alt="Manny Most Muscular" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/remi-model-tats.jpg" class="img-responsive" alt="Remi Model Tats" width="317px" height="322px">
                </div>
            </div>
            <div class="row no-gutter new-row">
              <div class="col-lg-2 col-sm-6">
                    <img src="img/ant-johns.jpg" class="img-responsive" alt="Ant Johns" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/white-guy.jpg" class="img-responsive" alt="Arnold Jr" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/enrique-double-bi.jpg" class="img-responsive" alt="Enrique Double Bi" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/anthony-b.jpg" class="img-responsive" alt="Anthony B" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/manny-most-muscular.jpg" class="img-responsive" alt="Manny Most Muscular" width="317px" height="322px">
                </div>
                <div class="col-lg-2 col-sm-6">
                    <img src="img/remi-model-tats.jpg" class="img-responsive" alt="Remi Model Tats" width="317px" height="322px">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-center">
                    <a class="images-button-more" style="padding-bottom: 3px; border-bottom: 1px dotted rgb(130,181,65); position: relative; top: 5px; cursor: pointer; text-decoration: none; border-radius: 50%">See more</a>
                </div>
                <div class="col-sm-12 text-center">
                    <a class="images-button-less" style="padding-bottom: 3px; border-bottom: 1px dotted rgb(130,181,65); position: relative; top: 5px; cursor: pointer; text-decoration: none; border-radius: 50%">See less</a>
                </div>
            </div>
        </div>
    </section>

I tried putting the jQuery around an if statement, and put new variables like "isClosed, isNotClosed", and then change their values from 0 to 1 based on certain events and loop if isClosed is true, but that wasn't doing me any justice.

add the html too please

depperm
– depperm

2015-07-21 02:44:47 +00:00
Commented Jul 21, 2015 at 2:44 — depperm
– depperm, Commented Jul 21, 2015 at 2:44

Abdul Ahmad · Accepted Answer · 2015-07-21 02:53:29Z

2

one option is to load the second row of images when the page loads but hide it with display: none and give it an id like id='second-row'

then in your click event you can do the following:

$('#buttonId').on('click', function() {
 $('#second-row').slideToggle();
});

heres a fiddle http://jsfiddle.net/kqvzhoo1/

answered Jul 21, 2015 at 2:53

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lansana Camara Over a year ago

Great suggestion! That works too, thanks. Only problem is I have to rewrite some code, but works nonetheless.

depperm · Accepted Answer · 2015-07-21 02:55:08Z

1

You're just missing one line in the jquery:

less.on('click', function() {
     $('.new-row').slideUp('1000', function() {
         less.fadeOut('slow');
         more.insertAfter(less).fadeIn('slow');//this line
     });
 });

answered Jul 21, 2015 at 2:55

depperm

10.8k4 gold badges46 silver badges68 bronze badges

1 Comment

Lansana Camara Over a year ago

This is it, thanks a lot! I knew it was something small.. couldn't wrap my head around it - only started learning jQuery a couple of days ago lol. Thanks again.

Collectives™ on Stack Overflow

jQuery: show on click, hide on click, and loop infinitely

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related