- to start off, there 1 row of images "see more" button underneath it.
- when "see more" button clicked, second row of images added after first row of images, , "see more" button replaced "see less" button.
- when "see less" button clicked, second row of images added in step above gets removed, , "see less" button gets removed.
question: how can make infinite loop, "see more" button reappear after step 3, allowing repetition?
here's jquery:
$(document).ready(function() { //hides new row prepare click event $('.images-section').children('.new-row').hide(); //creating variables 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 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 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 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 jquery around if statement, , put new variables "isclosed, isnotclosed", , change values 0 1 based on events , loop if isclosed true, wasn't doing me justice.
you're missing 1 line in jquery:
less.on('click', function() { $('.new-row').slideup('1000', function() { less.fadeout('slow'); more.insertafter(less).fadein('slow');//this line }); }); 
Comments
Post a Comment