Question

I have to create a page in HTML5 using jQuery in which all questions will be there in the form of table. By clicking on a particular question – it’s answer should appear sliding; on closing that answer the slider should go back and the questions should appear.

How is this possible? Should I use <div> for values or to fetch it from XML? Please guide with your suggestions and tutorials.

Answer 1

Here is a primordial example on how to do it:

demo jsBin

you need this HTML structure:

<div class="slider_container"> <!-- overflow:hidden; -->
<div class="slider">  <!-- position:absolute;width:loooot; -->

  <div class="box">
      <h2>Questions</h2>
      <ul class="goto">
        <li>Question 1</li>
        <li>Question 2</li>
        <li>Question 3</li>
        <li>Question 4</li>
      </ul>
  </div>
  <div class="box"><h2>ANSWER 1<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 2<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 3<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 4<span class="back">&lt; back</span></h2>box text...</div>

</div>
</div>

And this basic jQuery:

var galW = 600; // set here the 'slider container' width

$('ul.goto li').on('click',function(e){
  e.preventDefault();
  var thisIndex = $(this).index()+1;  
  $('.slider').stop(1).animate({left: -(galW*thisIndex)}, 1000);  
});

$('span.back').on('click',function(){
  $('.slider').stop(1).animate({left: 0}, 1000); 
});

what we do here is: get the index N of the clicked li element +1.
+1 cause we are already looking at the first box (with the questions), but all the other .box elements will be +1 index higher.

After we have that number we just animate the slider at “speed” (time) 1000 doing some simple math: we multiply the gotten index N by the ‘viewport’ width.

To go back we just animate the .slider back to the left:0px (or just ‘0’) position.

If you don’t understand some of the methods I used, you can find them here: http://api.jquery.com/

(PLEASE next time show some effort in asking your questions so we can look at some code of yours. Thanks! Happy coding)