How can I change styling on a button when it's clicked?

Issue

I have three buttons that are linked together, kind of like tabs. I want to make the name of the currently selected button appear in bold. So, when I click a button, I'd like its name to be bold, while the others remain as regular text.

IDs: button1 button2 button3

I need to do this using Javascript, and I'm using WordPress Elementor. Here's what I used:

Button widget - (for the 3 buttons) Text widget - to display the tab content when I click a button HTML widget - to connect the buttons and text widget

I know it might seem odd since I could just use the tabs widget, but there's another functionality I need.

Any suggestions, please?

I'm giving this a shot, but I'm not sure where to put it. button1.style.fontWeight = '900';

Here are some codes to provide you with insight.

button1.style.backgroundColor = 'white';
button1.addEventListener('click', function() {
  tab1.style.display = 'flex'; // Show tab1
  tab2.style.display = 'none'; 
  tab3.style.display = 'none'; 
   resetButtonStyles();
  button1.style.backgroundColor = 'white';
 
});

// Add click event to button2 to show tab2 and hide tab1
button2.addEventListener('click', function() {
  tab1.style.display = 'none';   // Hide tab1
  tab2.style.display = 'flex';
  tab3.style.display = 'none'; 
   resetButtonStyles();
  button2.style.backgroundColor = 'white';
  
});

button3.addEventListener('click', function() {
  tab1.style.display = 'none';  
  tab2.style.display = 'none';
  tab3.style.display = 'flex';
   resetButtonStyles();
  button3.style.backgroundColor = 'white';
});

Solution

Here's a code snippet using your current functions along with the font weight addition you are trying to add. You're on the right track in that you need to turn on the styling for the clicked button and tab while turning off the styling for the two other buttons.

I built a simple example of these three functions in action:

tab1.style.display = 'flex';
tab2.style.display = 'none';
tab3.style.display = 'none';
button1.style.backgroundColor = 'white';
button1.style.fontWeight = '900';


button1.addEventListener('click', function() {
  tab1.style.display = 'flex';
  tab2.style.display = 'none';
  tab3.style.display = 'none';
  //resetButtonStyles();
  button1.style.backgroundColor = 'white';
  button1.style.fontWeight = '900';
  button2.style.fontWeight = '300';
  button3.style.fontWeight = '300';

});

button2.addEventListener('click', function() {
  tab1.style.display = 'none';
  tab2.style.display = 'flex';
  tab3.style.display = 'none';
  //resetButtonStyles();
  button2.style.backgroundColor = 'white';
  button1.style.fontWeight = '300';
  button2.style.fontWeight = '900';
  button3.style.fontWeight = '300';

});

button3.addEventListener('click', function() {
  tab1.style.display = 'none';
  tab2.style.display = 'none';
  tab3.style.display = 'flex';
  //resetButtonStyles();
  button3.style.backgroundColor = 'white';
  button1.style.fontWeight = '300';
  button2.style.fontWeight = '300';
  button3.style.fontWeight = '900';

});

<button id="button1">Example button 1</button>
<button id="button2">Example button 2</button>
<button id="button3">Example button 3</button>
<p id="tab1">Example tab 1</p>
<p id="tab2">Example tab 2</p>
<p id="tab3">Example tab 3</p>

Something I would also suggest would be to make a single function which turns off the styling of all the buttons and then turns on the styling of the current button and tab; like this:

button1.style.fontWeight = '900';
button1.style.backgroundColor = 'white';
tab2.style.display = 'none';
tab3.style.display = 'none';

function toggleTab(tab, button) {
  var tabs = document.getElementsByClassName('tab');
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].style.display = 'none';
  }
  var buttons = document.getElementsByClassName('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].style.fontWeight = '300';
  }
  tab.style.display = 'flex';
  button.style.fontWeight = '900';
  button.style.backgroundColor = 'white';
}

<button id="button1" class="button" onclick="toggleTab(tab1, this)">Example button 1</button>
<button id="button2" class="button" onclick="toggleTab(tab2, this)">Example button 2</button>
<button id="button3" class="button" onclick="toggleTab(tab3, this)">Example button 3</button>
<p id="tab1" class="tab">Example tab 1</p>
<p id="tab2" class="tab">Example tab 2</p>
<p id="tab3" class="tab">Example tab 3</p>

This second suggestion isn't required, but could help simplify your code.

Answered By - Nick Friesen