Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was in use remains visible after submitting data via a form.
Below are the jQuery codes I am using:
$("#add_exams").hide();
$("#exams").hide();
$("#add_accts").hide();
$("#view_exam").click(function(){
$("#add_exams").hide();
$("#exams").hide();
$("#add_accts").hide();
$("#exams").fadeIn();
});
$("#create_exam").click(function(){
$("#add_exams").hide();
$("#exams").hide();
$("#add_accts").hide();
$("#add_exams").fadeIn();
});
$("#manage_accts").click(function(){
$("#add_exams").hide();
$("#exams").hide();
$("#add_accts").hide();
$("#add_accts").fadeIn();
});
//$(document).on("click", "#selectall",function(){
$(document).on("submit","#submit_acct", function(){
$("#add_accts").fadeIn();
});
The structure of my HTML looks like this:
<div id="content">
<input type="button" id="create_exam" value="Create Exam" title="Click to create new exam." />
<input type="button" id="view_exam" value="Exam" title="Click to view exam." />
<input type="button" id="manage_accts" value="Accounts" title="Click to view exam." />
<div id="add_accts">
/*forms go here */
</div>
<div id="add_exams">
/*forms go here */
</div>
<div id="exams">
/*forms go here */
</div>
</div>
After attempting to submit data, I found that the desired div is not being displayed even with the attempted jQuery manipulation. All of them remain hidden. I am seeking suggestions on how to retain display for the current active div. Any ideas?