Button link stays underlined until another button is clicked

Question

I have a page that we are trying to change to where 2 different categories of leadership are loaded upon the click of a button. Rather than having them placed one on top of the other. I was able to implement the change of the leadership categories on the click of the leadership group button. However, I cannot get the button to stay underlined when that category is active on page load or after clicking anywhere other than a button.

https://auduboncosites.wpengine.com/who-we-are/leadership/

I have tried a few different solutions, but they don't seem to be working for my issue and the solutions I found are pretty old. I don't actually think the JS I am using is doing anything in this instance and it's all currently underlining based on CSS.

CSS:

.active:focus, .active:active, .active:visited {
    text-decoration: underline;
}

JS:

var $buttons = jQuery('button');
$buttons.on('click',function() {
  jQuery(this).toggleClass('active').siblings('button').removeClass('active');
})

I hope someone can help me find a solution.

Thanks,

Answer 1

So that's just how the :focus state in HTML/CSS works. You have clicked on something, and that now has your focus until you click on something else. See my demo below. When something has focus it will have a green border. Click on one and it has focus. Click away or press tab to change the focus.

Just remove your :focus styles if you don't want that to happen.

button {
  border: 4px solid #333;
  font-weight: bold;
  font-size: 16px;
}

button:active {
  color: red;
}

button:focus {
  border-color: lightgreen;
  outline: none;
}

<button type="button">one</button>
<button type="button">two</button>
<button type="button">three</button>

---

Revised/Edited answer

I wasn't aware that you wanted to keep the link underlined. In that case this is even easier. You simply just need to apply a class when it's selected and remove it from the others. It's very close to the code you already posted, but I think you just need to have simpler CSS without messing with the :focus state. If the class is applied, it looks active. that's it.

Here's a version using jQuery.

var $buttons = $('button');
$buttons.on('click', function() {
  $(this).addClass('active').siblings('button').removeClass('active');
});

button {
  padding: 5px;
  font-weight: bold;
}

.active {
  text-decoration: underline;
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button">one</button>
<button type="button">two</button>
<button type="button">three</button>

And here's a version that does the same, but without jQuery being required.

document.querySelectorAll('button').forEach(function(thisBtn) {
  thisBtn.addEventListener('click', function() {
    var prevBtn = document.querySelector('button.active');
    if(prevBtn) {
      prevBtn.classList.remove('active');
    }
    
    thisBtn.classList.add('active');
  }, false);
});

button {
  padding: 5px;
  font-weight: bold;
}

.active {
  text-decoration: underline;
  background-color: lightgreen;
}

<button type="button">one</button>
<button type="button">two</button>
<button type="button">three</button>

Answer 2

As I understand from the question and the attached code, you want a specific button to be styled when click, and this effect should not be affected when clicking elsewhere. The code you provided contains more details. You must have a focused button that contains an active class, and you want the effect to continue even when the button is not focused . It is enough to rely on the class alone without depending on focus.

 Here's a code for the solution:

 https://codepen.io/mohammed-albadry/pen/wvQaPLq.