My webpage is filled with several large div elements.
There's a button on the page that, when clicked, should switch to the next div.
Despite my efforts, the code I've written doesn't seem to be working as expected. :(
This is the HTML structure:
<div class="tutorial">
<p class="heading">Introduce Yourself</p>
<div class="body">
<table>
<tr>
<td>
<label for="full_name">What is your full name?</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="full_name" id="full_name" placeholder="Full Name" />
</td>
</tr>
<tr>
<td><br/></td>
</tr>
<tr>
<td>
<label for="about">Describe yourself:</label>
</td>
</tr>
<tr>
<td>
<textarea id="about" name="about" rows="5" cols="40" placeholder="Share your hobbies, interests, and more about yourself"></textarea>
</td>
</tr>
<tr>
<td width="900px" height="60px"></td>
<td>
<button id="next" class="btn">Next</button>
</td>
</tr>
</table>
</div>
</div>
<div class="tutorial hidden">
<p class="heading">Introduction Continued</p>
<div class="body">Body</div>
</div>
<div class="tutorial hidden">
<p class="heading">More about You!</p>
<div class="body">Body Content</div>
</div>
<div class="tutorial hidden">
<p class="heading">Let's Explore More!</p>
<div class="body">Content goes here</div>
</div>
<div class="tutorial hidden">
<p class="heading">Fascinating Facts About You!</p>
<div class="body">Interesting Content</div>
</div>
The JavaScript code:
$(function () {
var tutorials = $("div.tutorial");
var idNumber = 1;
tutorials.each(function () {
$(this).attr("id", idNumber);
idNumber++;
});
var nextButton = $("#next");
$(nextButton).on('click', function () {
var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
var nextTutorialId = currentTutorialId + 1;
var nextDiv = null;
if ($("div.tutorial").is("#" + nextTutorialId)) {
nextDiv = $("div.tutorial");
}
nextDiv.removeClass("hidden");
});
});
CSS details have been excluded to keep it concise. :)
Desired Outcome:
I aim to have the next button hide the current div and display the subsequent one in sequence.
Actions Taken So Far:
var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
var nextTutorialId = currentTutorialId + 1;
var nextDiv = null;
if ($("div.tutorial").is("#" + nextTutorialId)) {
nextDiv = $("div.tutorial");
}
nextDiv.removeClass("hidden");