Switch div content JavaScript jQuery

Issue

I would like to know how to change divs content with js or jQuery. I have a div with id="container" which include 5 more divs with different id’s. What I need is to start with first div with id="vapor" then, by clicking on a button to change onto next div with id="baiat" and so on. Here’s my code, I couldn’t add any js or jQuery:

<div id="container" class="thirdcanvas">
      
       <div id="vapor">
           <img src="images/alfabet/w.png" alt=""/>
           <img src="images/alfabet/f.png" alt=""/>
           <img src="images/alfabet/v.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
       </div>
       
       <div id="baiat">
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/aa.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/t.png" alt=""/>
       </div>     
           
       <div id="colac">    
           <img src="images/alfabet/g.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
       </div> 
           
       <div id="slapi">    
           <img src="images/alfabet/s.png" alt=""/>
           <img src="images/alfabet/ss.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
       </div>  
           
       <div id="umbrela">   
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/n.png" alt=""/>
           <img src="images/alfabet/m.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
           <img src="images/alfabet/e.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
       </div>  
   </div> 

I have now this code:

var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");

var imgNumber=0; 

var numberOfImg = image.length;

function nextImage(){
    
    $("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

$("#click").click(function(){

    var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       
    
   divWithoutHiddenClass.addClass('hidden');
         
       if(divWithoutHiddenClass.next().html()===undefined){
           $("#container div:first").removeClass('hidden');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden');
    }
});
    
  if(imgNumber < numberOfImg){
    imgNumber++;
    }
  document.slideImage.src = image[imgNumber-1];
 
 }
 
 
            
if(document.images){
   
   var image1 = new Image();
   image1.src = "images/vapor.png";
   var image2 = new Image();
   image2.src = "images/baiat.png";
   var image3 = new Image();
   image3.src = "images/colac.png";
   var image4 = new Image();
   image4.src = "images/slapi.png";
   var image5 = new Image();
   image5.src = "images/umbrela.png";
   
   }  

with :

<a href="#" onClick="nextImage()"><img id="click" src="images/nextBtn.png" title="Continuare" /></a>

Solution

fiddle

JS

$("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

    $("#click").click(function(){

        var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

       divWithoutHiddenClass.addClass('hidden');

           if(divWithoutHiddenClass.next().html()===undefined){
               $("#container div:first").removeClass('hidden');
        }
        else{
            divWithoutHiddenClass.next().removeClass('hidden');
        }
    });

Answered By – tilda

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.