Button's bottom border disappears when i click somewhere else on the screen

Question

fiddle

This is my HTML code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button>
    <i class="fa fa-5x fa-motorcycle gobumpr_icon"></i>
</button>
<button>
    <i class="fa fa-car fa-5x gobumpr_icon"></i>
</button>

This is my CSS:

button:focus {
    border-bottom: thick solid #FFA800;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width 2s;
    -webkit-transition: width 2s;
    outline: none;
    box-shadow: none;
}

I want that border bottom to stay until the other button is being clicked. How can I do that?

Answer 1

:focus is not going to help because border will remove whenever you will click outside. For this you need to add a class on click of button that will stay unless another buttons inside the same page is clicked.

$(function() {
   var buttons = $('.button');
  
   buttons.click(function(e) {
     e.preventDefault();

     buttons.removeClass('focus');
     $(this).addClass('focus');
  });
});

.button.focus {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>

<button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 2

You can also do this without javascript at all :

input:checked + i{
	border-bottom:thick solid #FFA800;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	transition: width 2s;
    -webkit-transition: width 2s;
	outline:none;
	box-shadow:none;
}

input{
  display:none;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label>

<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>