JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<div id="mask">
<div id="qQuestions">
    
    <div class="wrapQ" style="background-color:green;color:#fff;">
        <div class="question">
           Questions 1
        </div>
        <div class="anaswers">
            This is an answer.
        </div>
    </div> 


    <div class="wrapQ" style="background-color:red;color:#fff;">
        <div class="question">
              Questions 2
        </div>
        <div class="anaswers">
            This is an answer.
        </div>
    </div>
    
    
    <div class="wrapQ" style="background-color:blue;color:#fff;">
        <div class="question">
              Questions 3
        </div>
        <div class="anaswers">
            This is an answer.
        </div>
    </div>

</div>
</div>
<button id="firstBtn">Next</button>

CSS

body{
 padding:10px;   
}
#qQuestions{
    width:780px;
    height:100px;
    background-color:#ccc;
    position:relative;
    left:0;
    -webkit-transition:all 1.0s ease-in-out;;
}
.wrapQ{
   width:260px;
   height:100px;
   background-color:#333;
   float:left;
}
#mask{
    width:260px;
    height:100px;
    overflow:hidden;
    border:solid #000 1px;
    position:relative;
}

JavaScript

$(function(){
   
    $("#firstBtn").click(function(){ 
        $("#qQuestions").css("left","-260px");
         $(this).attr("id", "2ndBtn");   
    });
    $("#2ndBtn").click(function(){
         $("#qQuestions").css("left","-260px");
          $(this).attr("id", "thridBtn");      
    });
    
    
    
    
});