The issue with hiding elements using .setAttribute in HTML/CSS is not occurring as expected

 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;}

Answer №1

If you want to give it a shot, give this a try:

document.getElementById('editstudentprofile').classList.add('unhide');
document.getElementById('editstudentprofile').classList.remove('hide');

Also, in the example provided, a , is used instead of a . after document in two lines.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

how to use jQuery to hide a flash-containing div without losing its content

Hello, I created a modal with jQuery UI that is displaying in front of a flash movie. However, the HTML content inside the modal appears corrupted. I attempted to hide the movie just before the modal is triggered and make it reappear after closing the mo ...

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

Facing an issue with my web app using Bootstrap 5, as the modal is not displaying properly. Below is the HTML code for the modal and the button that triggers it: <div class="modal" tabindex="-1" id=&quo ...

pre-iframe loading function

Is it possible to capture the state of an iframe while data is loading? The onload event only fires once all content has finished loading. I would appreciate any assistance with this issue. Thank you. ...

Removing inline elements from a Bootstrap dropdown can be achieved by customizing the dropdown

I have a query regarding the use of dropdowns in Bootstrap. When I inspect the element after applying dropdown bootstrap, I notice that some properties are added inline: position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(0px, - ...

Eliminate a targeted class from an HTML string in PHP

I am dealing with a string that looks like this: $string = '<img class="img-responsive animate scale animated" src="image/catalog/blocks/about-banner.jpg" alt="">'; My goal is to delete the img-responsive class from it. Any suggestions o ...

"Discover the secrets of flipping a webpage just like turning the pages of

I recently designed a basic website with 4 separate pages. The homepage includes navigation links for each page, such as - Page1 page2 Page3 Page4 My goal now is to create a feature where clicking on any of these links will open the corresponding page wi ...

Adjust the color of the text based on a conditional in react

I am looking for a way to select elements and change text color in my unordered list based on specific conditions. Below is an example of the structure I have: <div style={styles.passwordRules}> <ul style={styles.listOne}> <li style={ ...

How can I use Bootstrap and PHP to style future posts in separate rows on a website?

I am attempting to design a categories navigation menu using Bootstrap 5. It consists of two columns, the first displaying featured posts and the second showing 5 recent posts. Here is an example of what I have tried, but it didn't work as expected b ...

Having difficulty retrieving the value of a dynamically selected radio button in AngularJS

Having trouble with selecting radio options in my code, need some assistance to fix it. Check out my Plnkr Code - http://plnkr.co/edit/MNLOxKqrlN5ccaUs5gpT?p=preview Although I am able to retrieve names for the 'classes' object, the selections ...

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

Centered buttons placed right next to each other

Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...

Set the class of the list item to "active" class

My approach to styling involves using a UL and li class to contain form selection options. I plan on hiding the radio button and using its value upon form submission. I have managed to enable checking the radio box when the <li> is clicked, but for s ...

AngularJS HTTP POST request encountering issue with success function not functioning as expected

I am currently working on implementing a basic HTTP post request to insert data into my database. The following pages are involved: register.php contains the registration form. maincons.js houses the application controllers. sqlregister.php include ...

Can solid grid lines be shown using CSS instead of the default dashed grid lines?

Is there a method to achieve consistent and solid grid lines in C3 using CSS without specifying exact line values? For instance, consider C3's basic Grid Line example: var chart = c3.generate({ data: { columns: [ ['sampl ...

Guide to adding up the radio button values with Javascript

The tutorials I have reviewed include: How might I calculate the sum of radio button values using jQuery? How to find a total sum of radio button values using jQuery/JavaScript? How might I calculate the sum of radio button values using jQuery? Unfortu ...

Spin and shift image of a ball using Html 5

Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10. Here is the script I am using: var ball = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas&apos ...

Choose every fourth row in the table

Is there a way to alternate the background colors of selected groups of 4 rows in a table? I want to make one group red and the next group blue. Any suggestions or ideas on how to achieve this? <table> <tr style="background-color: red;"> ...

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

Is it possible to turn off GPU rasterization for a particular SVG element in Google Chrome?

There is a peculiar issue with the SVG graphic displayed on my webpage. On some computers, the complex linearGradient filling a Rect does not display all the Stops correctly, while on other computers it appears fine. I discovered that if I disable "GPU ra ...