Reverting button highlighting when another button is selected in Web development using CSS and Bootstrap

On my signup page, I have two buttons that control the display of corresponding containers. However, I encountered an issue where clicking a button changes its background color and keeps it changed even after selecting the other button. If I click the same button again, it reverts to its original color.

My goal is for a clicked button to maintain its active color only if the other button is not clicked. If the other button is selected, I want the first button to return to its default background color.

Below is the JavaScript code:

<script type = "text/javascript">
  function displayForm(c) {
    if (c.value == "1") {

      document.getElementById("container1").style.display = 'inline';
      document.getElementById("container2").style.display = 'none';
    } else if (c.value == "2") {
      document.getElementById("container1").style.display = 'none';

      document.getElementById("container2").style.display = 'inline';
    } else {}
  } 
</script>

Here are the button elements (please excuse any formatting issues):

                        <!--SELECTION BUTTONS-->
                            <form>
                                <div class="control-group">

                                    <label class="control-label">Are you a:</label>

                                    <div class="controls">

                                            <p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">

                                            <button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
                                            Buttons1</button>

                                            <button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>

                                          </div></p>

                                    </div>

                                </div>
                            </form>

Here is the CSS code (utilizing Bootstrap):

/* SWITCH BUTTONS */
.selection-buttons button{
    width: 140px;
    height: 60px;
    color: #FFF;
    background-color: #FFB10D;
    border-color: #fff; /* e59f0b */
}

.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
    color: #FFF;
    background-color: #00CC66;
    border-color: #fff; /* 00b75b */
}

Thank you for your help!

javascriptcsshtmltwitter-bootstrap

Answer №1

An effective and straightforward solution to consider. To implement this in your JavaScript code, simply include the following snippet:

 function toggleButtonState(c) {
          for (var j = 1; j <= total_buttons; j++) {
            if (document.getElementById("btn"+j)) {
             document.getElementById("btn"+j).classList.add("active");
          } else {
              document.getElementById("btn"+j).classList.remove("inactive");
          }
        }

After that, utilize your CSS stylesheet to customize the styling for the active and inactive classes. This approach should serve its purpose adequately unless you have an excessive amount of buttons.

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

Fixing an erroneous value that has been dragged into the drop function with Jquery

I am encountering an issue with my codes and need some assistance in identifying the problem. The data is being dynamically loaded from the database, and I am using a foreach loop to display all items in a draggable div. The issue arises when I drag an it ...

javascriptjquerylaravel

What steps should I take to enable this SimpleModal to load automatically?

Is there a way to have the SimpleModal script load when the page loads instead of having to click a button? Thank you for your help! < div id='basic-modal' > <a href='#' class='basic'>Demo</a> </div> ...

javascriptjquerymodalpopups

Discovering and choosing the appropriate course

I am facing a situation where I need to specifically select an element with the class .foo, but there are two anchor tags, both having the class .foo. However, I only want to select the one without the additional .bar class. How can I achieve this? <a ...

javascriptjquerycsscss-selectors

Is there a way to change the label of a link in JointJS by clicking on it?

Lately, I've been facing a bit of a challenge that I can't seem to figure out. Here's the situation: What I'm aiming for is to be able to click on a link in my graph and change the label associated with it. Currently, the workaround I& ...

javascriptjquerywebjointjs

The performance of the Node echo server decreases significantly by a factor of 10 when utilizing stream pipes instead of buffering

When using node v8.1.4 and v6.11.1 I decided to start off with an echo server implementation called pipe.js or simply pipe. const http = require('http'); const handler = (req, res) => req.pipe(res); http.createServer(handler).listen(3001); ...

javascriptnode.jshttpstreamoutput-buffering

Tips for assigning unique names to each radio input groupNeed to assign unique names to radio

Currently, I am seeking a dynamic solution to alter the name associated with a set of radio input buttons. The situation involves creating a travel itinerary where users can choose between "domestic" and "international." Based on this selection, the corre ...

javascriptjquery

Toggle button to collapse the Bootstrap side bar on larger screens

I am currently utilizing the following template: An issue I am facing is that I want my sidebar to either shrink or hide when a button is clicked, specifically on a 22" PC screen. I have experimented with several solutions without achieving success. Alt ...

jquerycssangularjstwitter-bootstrap

Is there a way to customize the visual appearance of radio buttons by using unique color schemes

Incorporating bootstrap 4, I have implemented a basic set of custom yes/no radio buttons. <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="rd_1" name="rd" class="custom-control-input green" value="Yes"&g ...

cssbootstrap-4

The JSON array provides the ideal syntax for looping purposes

I am working with JSON data and trying to check if a hovered element matches the names 'sports' or 'technology'. If there is a match, I want to retrieve the corresponding 'text' and 'image' values. However, I am only ...

javascriptjson

Is it possible to overlay a div onto a Google Map?

Does anyone know of a plugin or method that can achieve this? I have a website at this link, and at the bottom there is a map. I'm looking to add a small overlay box on top of the map with contact information inside. Edit: The box should be position ...

htmlcsswordpressgoogle-maps

How about this: "Using jQuery, we detached the element with the class 'myClass', then cloned it. But wait, where did my nested table go?"

I'm facing an issue where I have a div containing a table that I want to reuse for multiple entries in a JSON database. <div class="myButton"> <table> <tr id="currentVersion"> ...

jqueryhtmlclone

When using a file uploader to set an image on v-model in Vue JS, it sometimes results in

I am currently using Vue JS 2 to develop an image uploader functionality. The input in question has a change function that triggers a function and sets the selected file to the v-model property. After logging the data, I noticed that only an empty object ...

javascriptvue.jsnuxt.jsvee-validate

Combining data from an API using Vue for seamless integration

I need to extract data from an API, such as imdbID, and then append ".html" to it in order to create a variable that can be placed inside the href attribute of a button. However, I am facing difficulties in achieving this. Thank you in advance for your hel ...

javascripthtmlvue.js

Library for adjusting the x axis scaling accurately

I need to find a JavaScript chart library that can support lines and zooming for handling a large amount of data. One issue I have encountered with other libraries is scaling the x-axis based on date and time data provided in strings: y=[43,56,34,63....] ...

javascripthtmlcharts

Error: The variable "oppstart" has not been declared

How can I define the function oppstart? Could it be the reason why the calculator isn't working? When I click calculate, no result is displayed even though the rest of the code seems to be functioning correctly. <!DOCTYPE html> <html> &l ...

javascripthtml

Tips for increasing a numerical value with jQuery within a footnote extension for redactor.js

Currently, I am in the process of developing a plugin for redactor.js that will enable users to include footnotes. The end goal is to have these footnotes stored in a separate table in the database; however, as of now, it's just a mockup for a larger ...

javascriptjqueryincrement

Navigating through a large array list that contains both arrays and objects in Typescript:

I have an array containing arrays of objects, each with at least 10 properties. My goal is to extract and store only the ids of these objects in the same order. Here is the code I have written for this task: Here is the structure of my data: organisationC ...

javascriptnode.jstypescript

Display an image in a DIV by loading it from a URL provided in a TEXT BOX

I am having trouble loading an image into a div tag from a URL that is obtained from a text box. Here is my current code snippet, but I can't figure out what else needs to be done: <html lang="en"> <head> </head> <bod ...

javascriptjqueryhtmlcss

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

The server is encountering a 500 Internal Server Error, causing Postman to only submit empty curly brackets when attempting to input data into the request

Here is the code I am working on in index.js and auth.js: const express = require("express"); const dotenv = require("dotenv"); const mongoose = require("mongoose"); const authRoute = require("./routes/auth"); const app = express(); dotenv.config(); ap ...

javascriptnode.jsexpressmongoose