kayut Posted March 20, 2017 Share Posted March 20, 2017 Hi, In the following script, each time you click the button it shows 4 more elements: Load 4 more elements I need to change the script so that when all elements are visible and you click again the button, all elements get hidden except of the first 4 elements. I tried for hours but couldn't find any solution. Could you please help me? Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted March 20, 2017 Share Posted March 20, 2017 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style type="text/css"> body { background-color: #f6f6f6; width: 400px; margin: 20px auto; font: normal 13px/100% sans-serif; color: #444; } div { display: none; padding: 10px; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; margin-bottom: 5px; background-color: #f1f1f1; } a, a:visited { color: #33739E; text-decoration: none; display: block; margin: 10px 0; } a:hover { text-decoration: none; } #loadLess { display: none; } #loadMore, #loadLess{ padding: 10px; text-align: center; background-color: #33739E; color: #fff; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; transition: all 600ms ease-in-out; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; } #loadMore:hover { background-color: #fff; color: #33739E; } </style> </head> <body> <div>Content #1</div> <div>Content #2</div> <div>Content #3</div> <div>Content #4</div> <div>Content #5</div> <div>Content #6</div> <div>Content #7</div> <div>Content #8</div> <div>Content #9</div> <div>Content #10</div> <div>Content #11</div> <div>Content #12</div> <a href="#" id="loadMore">Load More</a> <!--<a href="#" id="loadLess">Load Less</a>--> <script type="text/javascript"> $(function() { $("div").slice(0, 4).show(); $(document).on('click', "#loadMore:not(.less)", function(e) { e.preventDefault(); $("div:hidden").slice(0, 4).slideDown({ }); if ($("div:hidden").length === 0) { $(this).fadeOut('slow', function() { $(this).html('Load Less'); $(this).fadeIn('slow', function() { $(this).addClass('less'); }); }); } desiredHeight(0); }); $(document).on('click', '#loadMore.less', function(e) { e.preventDefault(); $('div:gt(3)').fadeOut(); $(this).html('Load More'); $(this).removeClass('less'); var DHeight = $(window).height(); desiredHeight(DHeight); }); function desiredHeight(DHeight) { var offsetElement = $('html,body'); $(offsetElement).animate({ scrollTop: $(offsetElement).offset().top + parseInt(DHeight) }, 1500); } }); </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now