I am currently working on a project that involves a ul tag with 5 li items.
My goal is to display each item one by one when a button is clicked. This would mean showing the next item and hiding the previous one, similar to what happens in quizzes.
Here is the HTML code I am using:
<div class="span12" style="margin-top:140px;">
<ul id="part">
<li id="div0" style="display:none;">Question 1</li>
<li id="div1" style="display:none;">Question 2</li>
<li id="div3" style="display:none;">Question 3</li>
<li id="div4" style="display:none;">Question 4</li>
<li id="div5" style="display:none;">Question 5</li>
</ul>
<button id="next">Next</button>
</div>
And here is the jQuery code:
<script>
$(function(){
var items = $('ul#part li');
if(items.filter(':visible').length == 0)
{
items.first().show();
}
$('#next').click(function(e){
e.preventDefault();
items.filter(':visible:last').next().show();
});
});
</script>
While this code allows me to show the next item on button click, I am having trouble hiding the previous item.
How can I hide the previous item when clicking on "Next"?
Your assistance would be greatly appreciated.