Tengo problemas para mostrar datos usando el método jquery slice() y show() para mostrar los divs dinámicos resultantes del método php. el código está abajo:

 <style> .hide-show { display :none; } </style> <div class="col-sm-6 col-md-3 hide-show"> <!--- rest of the code--> </div> <div class="col-sm-6 col-md-3 hide-show"> <!--- rest of the code--> </div> <div class="col-sm-6 col-md-3 hide-show"> <!--- rest of the code--> </div> <div class="col-sm-6 col-md-3 hide-show"> <!--- rest of the code-> </div> <div class="col-sm-6 col-md-3 hide-show"> <!--- rest of the code--> </div> <div class="col-sm-6 col-md-3 hide-show"> <!--- rest of the code--> </div> . . . . .. and so on <div class="mt2 text-center load-more-btn" "> <a href="javascript:void(0);" class="btn btn-blank btn-sm-width"><?php echo lang('store load more'); ?></a> </div> <script> $('.hide-show').slice(0,12).show(); $(".load-more-btn a").click(function () { $('.hide-show:hidden').slice(0,12).show(); if($('.hide-show:hidden').length == 0 ) { $(".load-more-btn a").fadeOut(); } }); </script>

en la carga de la página inicial, no muestra los primeros 12 divs, que debería mostrar, pero al hacer clic comienza con los primeros 12 divs y en las palabras funciona perfectamente. ¿Puede alguien ayudarme con este problema, lo siento por mi mala escritura?