Conceal and reveal buttons at the same location on an HTML webpage

There are 3 buttons on my custom page called page.php:

<input type="submit" value="Btn 1" id="btn1">   
<input type="submit" value="Btn 2" id="btn2" onClick="action();>  
<input type="submit" value="Btn 3" id="btn3" onClick="action();>

The first button Btn 1 is initially hidden upon loading:

document.getElementById('btn1').style.visibility = 'hidden';

When either Btn 2 or Btn 3 is clicked, the goal is to hide that specific button and show Btn 1:

var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('btn1').style.visibility = 'visible';
            document.getElementById('btn2').style.visibility = 'hidden';
            document.getElementById('btn3').style.visibility = 'hidden';
        } 
    }

This method results in an empty space when Btn 1 was visible. Placing it below Btn 2 and Btn 3 leaves two empty spaces in their original positions.

Is there a way to show and hide these buttons in the same place on an html page?

javascripthtmlcss

Answer №1

Check out this method below by using display:none;

learn about visibility:hidden versus display:none

var button1 = document.getElementById('button1');

function triggerAction(element) {
  element.classList.add('hide');
  button1.classList.remove('hide');
}
.hide {
  display: none;
}
<input type="submit" class="hide" value="Button 1" id="button1">
<input type="submit" value="Button 2" id="button2" onClick="triggerAction(this);">
<input type="submit" value="Button 3" id="button3" onClick="triggerAction(this);">

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

ag-grid allows for selecting multiple rows without the need to press the Control Key

In order to select a maximum of two rows without pressing the Ctrl button, similar to single row selection behavior, we need to ensure that if the user selects more than two rows, the first selected row is automatically deselected and only the latest two ...

jqueryhtmlangularjsag-grid

Is there a way to lead to a password-protected page without making it accessible through the URL?

I'm currently honing my skills in web development and embarking on a project to create an interactive puzzle website. The premise is simple - the homepage will feature just an answer input field where users can enter the correct solution to progress t ...

javascriptphphtml

To ensure a rectangular image is displayed as a square, adjust its side length to match the width of the parent div dynamically

How can I make the images inside my centered flexbox parent div, #con, be a square with side length equal to the width of the parent div? The image-containing div (.block) is positioned between two text divs (#info and #links). I want the images to be squa ...

javascripthtmljquerycss

Ways to loop through an array in a JSON object

Exploring methods of iterating through an array in json: $(document).ready(function(){ $('#wardno').change(function(){ //this code will execute whenever there is a change in the select with id country $("#wardname > ...

javascriptjqueryjson

What could be the reason for the esm loader not recognizing my import?

Running a small express server and encountering an issue in my bin/www.ts where I import my app.ts file like so: import app from '../app'; After building the project into JavaScript using: tsc --project ./ and running it with nodemon ./build/bin ...

javascripttypescriptexpressnode-modules

Issue with Angular's ngOnChanges Lifecycle Hook Preventing Function ExecutionWhen attempting to run a function within Angular's ngOn

In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...

javascriptangularlifecycleeventemitter

Strategies for detecting changes in multiple HTML select elements with jQuery

I currently have three select HTML tags and I would like to filter my table using the selected values (group of selected tags) with an AJAX request. For example, filtering by Gender, Location, and Season. My question is how can I achieve this without dup ...

jqueryhtmlajaxselect

Fixing W3 Validation Errors in your Genesis theme through CSS requires a few simple steps. Let's

As a newcomer to this forum, I kindly ask for understanding regarding my current issue. Upon checking my website vocaloid.de/Wordpress/ using the W3C CSS validator, I discovered several parsing and value errors. In an attempt to solve this, I disabled all ...

htmlcssvalidationgenesis

When creating a dynamic page number using JavaScript during a print event, the height of an A4 page is not taken into

While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...

javascripthtmlcssprint-preview

Saving extra parameters with MongooseJS

When saving data in my app using a POST query, how can I include additional parameters to the Item? For example, I would like to add user: req.user._id. var Item = new Model(req.body); Item.save(function (err, model) { res.send(model); }); ...

javascriptnode.jsmongodbmongoose

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

javascriptcssinteract.js

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...

javascriptreactjstypescript

Ways to reduce the amount of time spent watching anime when it is not in view

My anime experiences glitches as the black container crosses the red, causing a decrease in duration. Is there a way to fix this glitch? I attempted to delay the changes until the red path is completed, but the glitches persist. delayInAnimeSub = ourVilla ...

javascripthtmlcssanimation

What is the best practice for accessing specific components of JSON values that are delimited by colons?

When working with an API that returns a JSON containing strings separated by colons, such as: { "id": "test:something:69874354", "whatever": "maybe" } It may be necessary to extract specific values from these strings. For example, in the given JSON s ...

javascriptjson

Trouble with React Material Modal TransitionProps triggering onEntering event

Currently, I am in the process of updating Material UI to version 5. Initially, I encountered an error stating that onEntering is deprecated and should be replaced with transitionprops. There is a specific method (let's name it doSomething) that I wa ...

javascriptreactjsmaterial-uitsx

What might be causing Flex not to function properly on my personalized landing page?

I attempted to create a basic landing page featuring an image background with a logo, button, and a row of 4 images displayed side by side using Flex. However, for some reason, the Flex is not functioning properly for the row of images. Here is the code s ...

htmlcssflexbox

Using Angular, you can easily add a <div> dynamically to all elements that share a class

In order to implement a solution, I am tasked with adding a new div element with the class '.cart-list-value .delete-product', which will contain a background image, to all elements that have the class .cart-list-item. Although I successfully man ...

htmlangulardomangular-renderer2

Retrieve the outcome of an AJAX request in JavaScript within a separate function

My uploadFunction allows me to upload files to my server using a Rest web service called with JQuery ajax. I also use this method for another function and need to determine the result of the web service call in order to add a row with the name of the uploa ...

javascriptjqueryajaxasynchronous

What might be causing my Vue unit test to overlook a function?

I am in the process of creating unit tests for my component dateFormat.js using Jest. The focus is on testing the function formatDateGlobal. Here is an excerpt from the test: import DateFormat from '../dateFormat'; describe('dateFormat.js& ...

javascriptunit-testingvue.jsjestjs

Preventing page reload in Supabase with NextJS when the website loses focus and regains it

I am working with the structure in _app.js of my Next.js app. // _app.js // import ... import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' import { SessionContextProvider } from '@supabase/auth-helpers-react' // ...

javascriptreactjsnext.jssupabase