javascript - Multiple pagination of <ul> lists inside show/hide div -
i wanted have pagination inside div sections show/hide when user clicks on relevant link. is, want effects specified in site: http://papermashup.com/jquery-show-hide-plugin/ , code given in stackoverflow article: jquery pagination through multiple ul lists together.
i have included below javascript code in file jscode.js
function check_navigation_display(el) { //accepts jquery object of containing div parameter if ($(el).find('ul').children('li').first().is(':visible')) { $(el).children('.prev').hide(); } else { $(el).children('.prev').show(); } if ($(el).find('ul').children('li').last().is(':visible')) { $(el).children('.next').hide(); } else { $(el).children('.next').show(); } } (function ($) { $.fn.showhide = function (options) { //default vars plugin var defaults = { speed: 1000, easing: '', changetext: 0, showtext: 'show', hidetext: 'hide' }; var options = $.extend(defaults, options); $(this).click(function () { $('.togglediv').slideup(options.speed, options.easing); // var stores button you've clicked var toggleclick = $(this); // reads rel attribute of button determine div id toggle var togglediv = $(this).attr('rel'); // here toggle show/hide correct div @ right speed , using easing effect $(togglediv).slidetoggle(options.speed, options.easing, function() { // fires once animation completed if(options.changetext==1){ $(togglediv).is(":visible") ? toggleclick.text(options.hidetext) : toggleclick.text(options.showtext); } }); return false; }); }; $('div.paginate').each(function () { $(this).append('<a class="prev">prev</a> | <a class="next">next</a>'); $(this).find('ul li:gt(4)').hide(); check_navigation_display($(this)); $(this).find('.next').click(function () { var last = $(this).siblings('ul').children('li:visible:last'); last.nextall(':lt(5)').show(); last.next().prevall().hide(); check_navigation_display($(this).closest('div')); }); $(this).find('.prev').click(function () { var first = $(this).siblings('ul').children('li:visible:first'); first.prevall(':lt(5)').show(); first.prev().nextall().hide() check_navigation_display($(this).closest('div')); }); }); })(jquery); my html code simple:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="jscode.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.show_hide').showhide({ speed: 1000, // speed want toggle happen easing: '', // animation effect want. remove line if dont want effect , if haven't included jquery ui changetext: 1, // if dont want button text change, set 0 showtext: 'show datums',// button text show when div closed hidetext: 'hide datums' // button text show when div open }); }); </script> <a href="#" class="show_hide" rel="#slidingdiv_1"> show datums </a> <br /> <div id="slidingdiv_1" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399ff; display:none;"> <div class="paginate"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> </ul> </div> </div> <br/> <a href="#" class="show_hide" rel="#slidingdiv_2"> show datums </a> <br /> <div id="slidingdiv_2" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399ff; display:none;"> <div class="paginate"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> </ul> </div> </div> but above code not working. jsfiddle link is: https://jsfiddle.net/axnktcvl/
do guys know doing wrong? dont have experience jquery apologies obvious mistakes.
thanks lot!
the problem see is, have not initiated showhide plugin like
$('.show_hide').showhide(); (function($) { $.fn.showhide = function(options) { //default vars plugin var defaults = { speed: 1000, easing: '', changetext: 0, showtext: 'show', hidetext: 'hide' }; var options = $.extend(defaults, options); $(this).click(function() { $('.togglediv').slideup(options.speed, options.easing); // var stores button you've clicked var toggleclick = $(this); // reads rel attribute of button determine div id toggle var togglediv = $(this).attr('rel'); // here toggle show/hide correct div @ right speed , using easing effect $(togglediv).slidetoggle(options.speed, options.easing, function() { // fires once animation completed if (options.changetext == 1) { $(togglediv).is(":visible") ? toggleclick.text(options.hidetext) : toggleclick.text(options.showtext); } }); return false; }); }; })(jquery); jquery(function($) { function check_navigation_display(el) { //accepts jquery object of containing div parameter if ($(el).find('ul').children('li').first().is(':visible')) { $(el).children('.prev').hide(); } else { $(el).children('.prev').show(); } if ($(el).find('ul').children('li').last().is(':visible')) { $(el).children('.next').hide(); } else { $(el).children('.next').show(); } } $('.show_hide').showhide(); $('div.paginate').each(function() { $(this).append('<a class="prev">prev</a> | <a class="next">next</a>'); $(this).find('ul li:gt(4)').hide(); check_navigation_display($(this)); $(this).find('.next').click(function() { var last = $(this).siblings('ul').children('li:visible:last'); last.nextall(':lt(5)').show(); last.next().prevall().hide(); check_navigation_display($(this).closest('div')); }); $(this).find('.prev').click(function() { var first = $(this).siblings('ul').children('li:visible:first'); first.prevall(':lt(5)').show(); first.prev().nextall().hide() check_navigation_display($(this).closest('div')); }); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#" class="show_hide" rel="#slidingdiv_1"> show datums </a> <br /> <div id="slidingdiv_1" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399ff; display:none;"> <div class="paginate"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> </ul> </div> </div> <br/> <a href="#" class="show_hide" rel="#slidingdiv_2"> show datums </a> <br /> <div id="slidingdiv_2" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399ff; display:none;"> <div class="paginate"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> </ul> </div> </div>
Comments
Post a Comment