Move buttons from one group to another group

Question

Move buttons from one group to another group

I have a task to update a group of buttons with different buttons depending on the initial button chosen.

Button1: when clicked, both buttons will be replaced by Button1a and Button1b
Button2: when clicked, both buttons will be replaced by Button2a and Button2b

This is what I have done so far:

<div class="buttons">
  <div class="buttons1-2">
    <button type="button" class="btn btn1">Button 1</button>
    <button type="button" class="btn btn2">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button type="button" class="btn btn1a">Button 1a</button>
    <button type="button" class="btn btn1b">Button 1b</button>
  </div>    
  <div class="button2a-b">
    <button type="button" class="btn btn2a">Button 2a</button>
    <button type="button" class="btn btn2b">Button 2b</button>
  </div>    
</div>

I have hidden the 1a-b and 2a-b buttons:

.button1a-b {
    display: none;
}
.button2-b {
    display: none;
}

However, I am having trouble writing the JavaScript code for this functionality. Can anyone assist me in coding this in JavaScript? Additionally, if there is a more efficient way to structure my HTML/CSS for this task, please share your recommendations.

javascript html css

Answer 1

Answer №1

One way to achieve this is by using the onClick() function.

function handleButtonClick(btn) {
  var replaceWith = "buttons1a-b";
  if (btn.id == "btn2") {
    replaceWith = "buttons2a-b";
  }

  var allChildren = document.getElementsByClassName('buttons')[0].children;
  for (var i = 0; i < allChildren.length; i++) {
    var child = allChildren[i];
    if (child.className != replaceWith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

}

.buttons1a-b {
  display: none;
}

.button2a-b {
  display: none;
}

<div class="buttons">
  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="handleButtonClick(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="handleButtonClick(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button class="btn btn1a">Button 1a</button>
    <button class="btn btn1b">Button 1b</button>
  </div>
  <div class="button2a-b">
    <button class="btn btn2a">Button 2a</button>
    <button class="btn btn2b">Button 2b</button>
  </div>
</div>

Answer 2

One way to achieve this is by using the onClick() function.

function handleButtonClick(btn) {
  var replaceWith = "buttons1a-b";
  if (btn.id == "btn2") {
    replaceWith = "buttons2a-b";
  }

  var allChildren = document.getElementsByClassName('buttons')[0].children;
  for (var i = 0; i < allChildren.length; i++) {
    var child = allChildren[i];
    if (child.className != replaceWith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

}

.buttons1a-b {
  display: none;
}

.button2a-b {
  display: none;
}

<div class="buttons">
  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="handleButtonClick(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="handleButtonClick(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button class="btn btn1a">Button 1a</button>
    <button class="btn btn1b">Button 1b</button>
  </div>
  <div class="button2a-b">
    <button class="btn btn2a">Button 2a</button>
    <button class="btn btn2b">Button 2b</button>
  </div>
</div>

Answer 3

Answer №2

While it may not be the most optimal solution, it should suffice for your needs. Essentially, I created an event listener for each button click. This way, when a button is clicked, the hidden buttons are displayed while the current button is hidden.

document.getElementById('btn1').addEventListener('click', function() {
  changeButtons(document.getElementsByClassName('buttons1a-b'), 'block');
  this.style.display = "none";
  document.getElementById('btn2').style.display = "none";
});
document.getElementById('btn2').addEventListener('click', function() {
  changeButtons(document.getElementsByClassName('button2a-b'), 'block');
  document.getElementById('btn1').style.display = "none";
  this.style.display = "none";
});

function changeButtons(coll, display) {

  for (var i = 0, len = coll.length; i < len; i++) {
    coll[i].style["display"] = display;
  }
}

.buttons1a-b {
  display: none;
}

.button2a-b {
  display: none;
}

<div class="buttons">
  <div class="buttons1-2">
    <button id="btn1" type="button" class="btn btn1">Button 1</button>
    <button id="btn2" type="button" class="btn btn2">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button type="button" class="btn btn1a">Button 1a</button>
    <button type="button" class="btn btn1b">Button 1b</button>
  </div>
  <div class="button2a-b">
    <button type="button" class="btn btn2a">Button 2a</button>
    <button type="button" class="btn btn2b">Button 2b</button>
  </div>
</div>

Answer 4

While it may not be the most optimal solution, it should suffice for your needs. Essentially, I created an event listener for each button click. This way, when a button is clicked, the hidden buttons are displayed while the current button is hidden.

document.getElementById('btn1').addEventListener('click', function() {
  changeButtons(document.getElementsByClassName('buttons1a-b'), 'block');
  this.style.display = "none";
  document.getElementById('btn2').style.display = "none";
});
document.getElementById('btn2').addEventListener('click', function() {
  changeButtons(document.getElementsByClassName('button2a-b'), 'block');
  document.getElementById('btn1').style.display = "none";
  this.style.display = "none";
});

function changeButtons(coll, display) {

  for (var i = 0, len = coll.length; i < len; i++) {
    coll[i].style["display"] = display;
  }
}

.buttons1a-b {
  display: none;
}

.button2a-b {
  display: none;
}

<div class="buttons">
  <div class="buttons1-2">
    <button id="btn1" type="button" class="btn btn1">Button 1</button>
    <button id="btn2" type="button" class="btn btn2">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button type="button" class="btn btn1a">Button 1a</button>
    <button type="button" class="btn btn1b">Button 1b</button>
  </div>
  <div class="button2a-b">
    <button type="button" class="btn btn2a">Button 2a</button>
    <button type="button" class="btn btn2b">Button 2b</button>
  </div>
</div>

Move buttons from one group to another group

Answer №1

Answer №2

Similar questions

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

Manipulate HTML elements using JavaScript when a key is being held down

verify access with mysql database

Removing an item from a JSON array based on its value using jQuery

Unable to retrieve information from localhost site using the expressjs API. I have attempted to use both vue-resource and axios in order to get the data without success

Prevent content from occupying unnecessary space below a sticky div

Guide to showcasing associated information in HTML using Angular 7

Node.js tutorial: Building routes with regex and implementing redirects

bcrypt is failing to return a match when the password includes numeric characters

Challenges with KendoUI integration

One issue with my Quiz app is that sometimes the correct and incorrect answer methods run concurrently, leading to occasional occurrences of this problem

Creating a vertical bar chart in D3 with a JSON data source embedded within the code

What could be causing the error 404 message to appear when trying to retrieve video data?

No need for jQuery with this scrolling image gallery

Leverage VueJS and VueX to seamlessly integrate firebase 9 functions within my application

Creating a wrapper component to enhance an existing component in Vue - A step-by-step guide

What is the best way to attach a Label to a THREE.Mesh object?

Instant webpage updates upon editing CSS/HTML live

The width of the Ion-slide is dynamically determined by the styling

Warning: Potential unhandled promise rejection in React class component