slidejs not working on show/hide

slidejs not working on show/hide

  • Ganesha Chathurthi festival celebration at JIRS
  • JIRS Goa Trip
  • Inter School Exchange Program
  • UK Universities at JIRS
  • Ganesha Chathurthi festival celebration at JIRS
  • JIRS Goa Trip
  • Inter School Exchange Program
  • UK Universities at JIRS
  • Ganesha Chathurthi festival celebration at JIRS
  • JIRS Goa Trip
  • Inter School Exchange Program
  • UK Universities at JIRS
  2. <div class="large-6a columns">
  3.                  <div class="col-md-8">
  4.   <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="width:225px;margin-left:-260px!important;top:5%;margin:0 auto;position:absolute;">
  5.           <div class="panel panel-default">
  6.           <div class="panel-heading" role="tab" id="headingOne">
  7.               <h4 class="panel-title">
  8.                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" name="2016">
  9.                     2016
  10.                  </a>
  11.                 </h4>
  12.             </div>
  13.             <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  14.                 <div class="panel-body">
  15.                   <ul class="list-group list-group-1 color-4">
  16.                   <li class="list-group-item btn btn-4" id="ganesha">Ganesha Chathurthi festival celebration at JIRS</li>
  17.                   <li class="list-group-item btn btn-4" id="jirs">JIRS Goa Trip</li>
  18.                   <li class="list-group-item btn btn-4" id="inter">Inter School Exchange Program</li>
  19.                   <li class="list-group-item btn btn-4" id="ukjirs">UK Universities at JIRS</li>
  20.                   <li class="list-group-item btn btn-4">Ganesha Chathurthi festival celebration at JIRS</li>
  21.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  22.                   <li class="list-group-item btn btn-4">Inter School Exchange Program</li>
  23.                   <li class="list-group-item btn btn-4">UK Universities at JIRS</li>   
  24.                   <li class="list-group-item btn btn-4">Ganesha Chathurthi festival celebration at JIRS</li>
  25.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  26.                   <li class="list-group-item btn btn-4">Inter School Exchange Program</li>
  27.                   <li class="list-group-item btn btn-4">UK Universities at JIRS</li>                     
  28.               </ul>
  29.                 </div>
  30.             </div>
  31.           </div>
  32.       <div class="panel panel-default">
  33.           <div class="panel-heading" role="tab" id="headingTwo">
  34.             <h4 class="panel-title">
  35.               <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  36.                 <a href="albums-2015.php#2015">2015</a>
  37.               </a>
  38.             </h4>
  39.           </div>
  40.           <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  41.             <div class="panel-body">
  42.               <!-- <ul class="list-group list-group-2 color-4">
  43.                   <li class="list-group-item btn btn-4">Ganesha Chathurthi festival celebration at JIRS</li>
  44.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  45.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  46.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  47.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  48.                   <li class="list-group-item btn btn-4" >Ganesha Chathurthi festival celebration at JIRS</li>
  49.                   <li class="list-group-item btn btn-4" >JIRS Goa Trip</li>
  50.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  51.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  52.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  53.               </ul> -->
  54.             </div>
  55.           </div>
  56.         </div>
  57.       <div class="panel panel-default">
  58.           <div class="panel-heading" role="tab" id="headingThree">
  59.             <h4 class="panel-title">
  60.               <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  61.                 <a href="albums-2014.php#2014">2014</a>
  62.               </a>
  63.             </h4>
  64.           </div>
  65.           <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  66.             <div class="panel-body">
  67.               <!-- <ul class="list-group list-group-3 color-4">
  68.                   <li class="list-group-item btn btn-4" >Ganesha Chathurthi festival celebration at JIRS</li>
  69.                   <li class="list-group-item btn btn-4" >JIRS Goa Trip</li>
  70.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  71.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  72.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  73.                   <li class="list-group-item btn btn-4" >Ganesha Chathurthi festival celebration at JIRS</li>
  74.                   <li class="list-group-item btn btn-4" >JIRS Goa Trip</li>
  75.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  76.                   <li class="list-group-item btn btn-4">JIRS Goa Trip</li>
  77.                   <li class="list-group-item btn btn-4">Coaching By Career Launcher at JIRS</li>
  78.               </ul> -->
  79.             </div>
  80.           </div>
  81.       </div>
  82.     </div>
  83.   </div> <!--col-md-8 end-->
  84.   <div id="slides" class="slidesnew">
  85.       <img src="img/example-slide-1.jpg" >
  86.       <img src="img/example-slide-2.jpg" >
  87.       <img src="img/example-slide-3.jpg">
  88.       <img src="img/example-slide-4.jpg">
  89.     </div>
  90.     <div id="slides2" class="slidesnew">
  91.       <img src="img/Coaching By Career Launcher at JIRS/SAM_4436.png" >
  92.       <img src="img/Coaching By Career Launcher at JIRS/SAM_4437.png" >
  93.       <img src="img/Coaching By Career Launcher at JIRS/SAM_4438.png">
  94.       <img src="img/Coaching By Career Launcher at JIRS/SAM_4439.png">
  95.       <img src="img/Coaching By Career Launcher at JIRS/SAM_4440.png">
  96.     </div>
  97.     <div id="slides3" class="slidesnew">
  98.       <img src="img/Inter School Exchange Program/Jain-International-Residential-School-student-exchange-program-1.jpg" >
  99.       <img src="img/Inter School Exchange Program/Jain-International-Residential-School-student-exchange-program-2.jpg" >
  100.       <img src="img/Inter School Exchange Program/Jain-International-Residential-School-student-exchange-program-3.jpg">
  101.       <img src="img/Inter School Exchange Program/Jain-International-Residential-School-student-exchange-program-4.jpg">
  102.     </div>
  103.     <div id="slides4" class="slidesnew">
  104.       <img src="img/UK Universities at JIRS/1.png" >
  105.       <img src="img/UK Universities at JIRS/2.png" >
  106.       <img src="img/UK Universities at JIRS/3.png">
  107.       <img src="img/UK Universities at JIRS/4.png">
  108.     </div>


  111.   </div>
  112.   </div>
  113.         </div>
  114.     </div>
  115.   
  116.     </div>
  117.     </div>
  118.     </div>


jquery code is here

  2.       $(document).ready(function(){
  3.       $("#slides").show(); 
  4.       $("#slides2").hide(); 
  5.       $("#slides3").hide(); 
  6.       $("#slides4").hide();
  7.    $('#slides').slidesjs({
  8.         width: 940,
  9.         height: 528,
  10.         play: {
  11.           active: true,
  12.           auto: true,
  13.           interval: 4000,
  14.           swap: true
  15.         }        
  16.       });


  19.     $("#ganesha").click(function(){
  20.       $("#slides").show(); 
  21.       $("#slides2").hide(); 
  22.       $("#slides3").hide(); 
  23.       $("#slides4").hide(); 
  24.        $('#slides').slidesjs({
  25.         width: 940,
  26.         height: 528,
  27.         play: {
  28.           active: true,
  29.           auto: true,
  30.           interval: 3500,
  31.           swap: true
  32.         }
  33.       }); 
  34.         
  35.     });
  36.     $("#jirs").click(function(){
  37.       $("#slides").hide(); 
  38.       $("#slides2").show(); 
  39.       $("#slides3").hide(); 
  40.       $("#slides4").hide();  
  41.       $('#slides2').slidesjs({
  42.         width: 940,
  43.         height: 528,
  44.         play: {
  45.           active: true,
  46.           auto: true,
  47.           interval: 3500,
  48.           swap: true
  49.         }
  50.       }); 
  51.      
  52.     });
  53.      
  54.    $("#inter").click(function(){
  55.       $("#slides").hide(); 
  56.       $("#slides2").hide(); 
  57.       $("#slides3").show(); 
  58.       $("#slides4").hide();  
  59.       $('#slides3').slidesjs({
  60.         width: 940,
  61.         height: 528,
  62.         play: {
  63.           active: true,
  64.           auto: true,
  65.           interval: 3500,
  66.           swap: true
  67.         }
  68.       });  
  69.      
  70.     });
  71.         $("#ukjirs").click(function(){
  72.       $("#slides").hide(); 
  73.       $("#slides2").hide(); 
  74.       $("#slides3").hide(); 
  75.       $("#slides4").show();  
  76.       $('#slides4').slidesjs({
  77.         width: 940,
  78.         height: 528,
  79.         play: {
  80.           active: true,
  81.           auto: true,
  82.           interval: 3500,
  83.           swap: true
  84.         }
  85.       }); 

  87.     });
  88.            
  89.     });
slidejs not working second time the gallery album is clicked,i have a accordion,it contains multiple album lists,upon clicking album title in list,the gallery of particular album starts,but after single loop,if we click on first album,the gallery not working. Here's the code,Using Slidejs