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

Utilize puppeteer by passing a function inside page.waitForFunction() for efficient automation processes

Below is the code I am using: function checkDataRefresh(pastAvgGain, currentAvgGain) { if (pastAvgGain !== currentAvgGain) { return true; } else { return false; } } async function fetchInformation(pair, page) { let pastAvgGain = C.AVG ...

javascriptweb-scrapingpuppeteer

File uploading feature in Bootstrap (without the need for Javascript)

While I've seen this question posted in a similar style before, one critical point (in my opinion) hasn't been addressed - is there a way to achieve this without using JavaScript? On mobile devices, overscripted sites can sometimes have non-worki ...

htmlcsstwitter-bootstrap

The Google Javascript API Photo getURL function provides a temporary URL that may not always lead to the correct photo_reference

Currently, I am integrating Google Autocomplete with Maps Javascript API into my Angular 5 application. As part of my website functionality, I fetch details about a place, including available photos. The photo URL is obtained through the getURL() method. ...

javascriptangulargoogle-maps-api-3

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

Error in JavaScript Slideshow

I am attempting to create a slider that changes with a button click. Below is my JavaScript code: var img1=document.getElementById("p1"); var img2=document.getElementById("p2"); var img3=document.getElementById("p3"); function slide(){ ...

javascripthtmlcssuser-interfaceslider

Modifying property values using the onError event when encountering an error with the MUI DateTimePicker and

My goal is to set the 'myError' variable to true when MUI DateTimePicker throws an onError event, but for some reason it's not working. The code itself seems correct because if I replace () => {setValue({ ...value, ...

javascriptreactjsmaterial-ui

When large spheres meet, Three.js/WebGL displays them as fractured

I must admit that I am not very experienced with 3D graphics. Issue In my WebGL model using Three.js, I have intentionally made two spheres collide. However, when the spheres are extremely large, they appear "broken" at the point of intersection, whereas ...

javascriptthree.jsgeometrywebgl

Is it possible to resize the background-image style?

When using the regular img tag in HTML, you can specify the width and height, and the browser will scale the image. If the dimensions are not too different from the original, the result is usually decent. For example, you can scale the avatar image to 32x ...

htmlcss

Verify the type of email domain (personal or corporate)

Here's an example: isPersonalEmail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aea1ada580a7ada1a9aceea3afad">[email protected]</a>") // true isPersonalEmail("<a href="/cdn-cgi/l/email- ...

javascriptnode.jstypescriptemailnpm

In search of the mean value using PHP, jQuery, and AJAX technologies

I have successfully created a star rating system using PHP and jQuery. The issue arises when attempting to display the average rate for a specific item that I am rating; instead, the average value printed is for all items being rated. Here is my jQuery co ...

javascriptphpjqueryajax

Is it possible to dynamically adjust the width of table columns using CSS/LESS on a per-column basis?

In this scenario, the table's column width is determined by the number of columns present. For example, if there are 4 columns in the table, each column's width would be set to a maximum of 25% of the table's overall width. With 3 columns, t ...

cssless

Vue.JS and its Onclick event handler allows for dynamic and interactive

These are my two buttons: <button onclick="filterSelection('Action')">Action</button> and <button onclick="filterSelection('Adventure')">Adventure</button> Now, I'm trying to achieve the same fun ...

javascripthtmlvue.js

Omitting specific modules from the Webpack DLL compilation

I have a universal JavaScript application built with Webpack. I've utilized the DLL plugin to pre-build all my node_modules, but recently encountered an issue when adding a new library. This specific library is causing the DLL build process to fail (d ...

javascriptnode.jsreactjswebpack

Executing code within Vue js $set method's callback

For my v-for loop that generates a list of flights, I have implemented functionality where the user can click on a "flight details" button to send an AJAX request to the server and append new information to the results array. To update the view accordingly ...

javascriptvue.js

Craft a function within the recompose library

As I was exploring the compose function in recompose library by @acdlite to combine boundary conditions for Higher Order Components, I came across two different implementations of the compose function: const compose = (...funcs) => funcs.reduce((a, b) ...

javascriptreactjsfunctional-programmingreducehigher-order-functions

Ways to transform epoch timestamp to present timestamp?

Is there a way to accurately convert an epoch timestamp in milliseconds to the current timestamp in milliseconds? My Attempt: var currentTime = (resp.timestamp * 1000) + 1980000000; resp.timestamp represents the epoch timestamp I attempted to add 5 ho ...

javascriptjquery

Match precisely with a specific constituent of the adjacent cell

Is there a way to accomplish this layout using tables? I'm open to suggestions, such as utilizing flexbox, if it's not possible with tables. In a table with two columns, the left column contains text while the right column holds an image and add ...

htmlcsshtml-tablealignment

Next.js version 14 is having difficulties displaying the loading.tsx file

click here for image description Why is the loading not displaying when navigating to /profile? How can I fix this issue? export default function Loading() { // You can add any UI inside Loading, including a Skeleton. return ( <div> lo ...

javascriptnext.jsnext.js14

Using absolute positioning for child elements within a table cell division in CSS

Similar Question: Is it possible to position items relatively or absolutely within a display: table-cell? I am working with a display: table layout example. You can view the demo here. In the second panel, there is a #pos div that has a position: abs ...

htmlcsscss-tables

Module or its corresponding type declarations not found in the specified location.ts(2307)

After creating my own npm package at https://www.npmjs.com/package/leon-theme?activeTab=code, I proceeded to set up a basic create-react-app project at https://github.com/leongaban/test-project. In the src/index.tsx file of my react app, I attempted to im ...

javascripttypescriptnpmnpm-package