Hi I'm trying to make a functionality where if the customer clicks the show more, 3 images will appear, and if it was clicked one more time another 3 images will appear and so fourth. I'm having trouble on Javascript, just wondering if someone can help me see the error.
my 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-pany/72810435-hello-america">
<img class="livery-article-image"
src=".png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-pany/72810435-hello-america">
<img class="livery-article-image"
src=".png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-pany/72810435-hello-america">
<img class="livery-article-image"
src=".png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-pany/72810435-hello-america">
<img class="livery-article-image"
src=".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 />Hi I'm trying to make a functionality where if the customer clicks the show more, 3 images will appear, and if it was clicked one more time another 3 images will appear and so fourth. I'm having trouble on Javascript, just wondering if someone can help me see the error.
my 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-pany/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify./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-pany/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify./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-pany/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify./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-pany/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify./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 />- You can see the error in the inspect element press Ctrl-Shift-i – Endrit Shala Commented Oct 29, 2015 at 16:44
- thanks for the hint, but it doesn't answer my question. – AJ Abaricia Commented Oct 29, 2015 at 16:46
- 1 Please fix your HTML and setup JSFiddle to show what version of JQuery you are using( Left Bar). For example you only have one closing tag for li. – Dean Meehan Commented Oct 29, 2015 at 16:48
- 1 I think you trying to load more image result. check the below fiddle. It may help you. jsfiddle/cse_tushar/6FzSb – web2tips Commented Oct 29, 2015 at 17:04
3 Answers
Reset to default 2Your code required some minor fixes. The id used in html and jquery were not in coherence. I have updated displays to be modified by toggling 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');
});
Refer this: http://fiddle.jshell/n8f983cb/7/
See the fiddle
A number of problems in your code, from logic issues to classname typos.
So, i rewrote your code a little bit. Check if this attends your need.
Thank you (:
There were a few mistakes in your code such as using the wrong id's as well as other things. But, instead of detailing the minor typos and syntax errors that won't really be helpful knowledge for anyone in the future, I'm going to demonstrate how I would approach the problem.
Create an object which holds a function for each action.
- showMore should increment the counter, then show the appropriate items
- showLess should decrement the counter, then hide the appropriate items
Create one function that hides or shows items based on the counter and hides or shows each action based on whether it can be used or not. Call this function at the end of each action defined previously.
Assign a delegated event listener to the parent of the controls, lookup the correct function based on the id and execute it. I added a fallback in case for some reason the code is changed and it can no longer find the correct function.
I've reduced the HTML and used placeholder images to reduce the size of the demo below, but it will work with your HTML as well.
$(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./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./200/100/abstract"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./200/100/business"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./200/100/animals"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./200/100/transportation"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./200/100/sports"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel./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>