function showEditStudentProfile() {
document.getElementById('editstudentprofile').setAttribute('class', 'unhide');
document.getElementById('profile_viewStudent').setAttribute('class', 'hide');
document.getElementById('ViewStudent').setAttribute('class', 'unhide');
}
function showViewStudentProfile() {
document.getElementById('editstudentprofile').setAttribute('class', 'hide');
document.getElementById('profile_viewStudent').setAttribute('class', 'unhide');
document.getElementById('ViewStudent').setAttribute('class', 'unhide');
}
<div id="ViewStudent" class="hide">
<a href="#ViewProfileStudent" class="student_profile_view col-sm-1" onclick= "showViewStudentProfile()" >View Profile</a>
<a href="#EditProfileStudent" class="student_profile_edit col-sm-1" onclick="showEditStudentProfile()">Edit Profile</a>
<form id="editstudentprofile" class="hide">
<h4>Edit Profile</h4>
<label class="col-sm-3">Major:</label>
<input class="major_input col-sm-5" name="studentmajor" type="text" placeholder="Enter your Major">
<br/>
<label class="col-sm-3">Cumulative GPA:</label>
<input class="GPA_input col-sm-1" name="studentGPA" type="text" placeholder="GPA">
<br/>
<label class="col-sm-3">Expected Graduation Date:</label>
<input class="graduation_input col-sm-2" name="studentgraduationdate" type="text" placeholder="MM/DD/YYYY">
<br/>
<label class="col-sm-3">Have you served as a TA before?</label><br/>
<input class="previousTA_input" name="previousTA" type="radio"> Yes<br/>
<input class="previousTA_input" name="previousTA" type="radio"> No<br/>
<a href="#EditProfileStudent" class="editaccount_btn btn btn-default" >Update Profile</a>
</form>
<div id="profile_viewStudent" class="hide">
<h4>Profile</h4>
</div>
</div>
Clicking on the view/edit profile link does not toggle the visibility of the other, resulting in both screens remaining unchanged. Any assistance with this issue would be greatly appreciated, as I have not found a solution in other posts I've reviewed.
Additionally, here is the CSS for the hide class:
div.hide {
display: none;}
form.hide {
display: none;}