How focus off on a toggle button?

Question

I have a problem by handling focus on/off on a toggle button. If I click on the button the focus goes on and also appear the container, so it works good. If I re-click on the button the container disappear but the focus still remain with focus on! The only solution is click outside the button to focus off and this is very bad. So I would like: focus visible when the container appear (click on button) and focus off when the container disappear (re-click on button). How can I fix it? here fiddle: https://jsfiddle.net/vo1npqdx/802/ as you can see when re-click the button, the container disappear but blue color (focus on) remain, so the button doesn't come back to the original color in automatic.

css:

.ini{
color: red;
border: 2px solid #0000FF;
}
.ini:hover, .ini:focus{
  color: blue;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175);
}

js:

  $("#chi").hide();
  $("#hs1").click(function(){
      if($('#chi').is(':hidden')){
      $("#chi").toggle(500);}
      else{$("#chi").hide(1000);}
  });

html:

<a class="btn btn-default ini" id="hs1" href="#" role="button">TEST</a>
<div class="container" id="chi">
         <div class="row">
           <div class="col-xs-11 col-sm-12 col-md-10 col-lg-8 col-centered">
                <div class="panel panel-primary">
                     <div class="panel-heading"><h2>Test</h2><h5>Test</h5></div>
                     <div class="panel-body">
                       <p>Test</p>
                       </div>
               </div>
           </div>
         </div>
       </div>

You could just set outline: 0; on the .ini:focus css class if you don't want the focus to be visible. — Crashtor, May 19 '17 at 13:05
I want focus visible when the container appear (click on button) and focus off when the container disappear (re-click on button) — lausent, May 19 '17 at 13:09
here fiddle: https://jsfiddle.net/yryq75jy/ as you can see when you re-click the button, the container disappear but blue color (focus on) remain, so the button doesn't come back to the original color in automatic. — lausent, May 19 '17 at 13:18

score 1 · Accepted Answer · answered May 19 '17 at 13:18

1

You want this ? See this fiddle

CSS :

.ini:hover {
  color: blue;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175);  
}

.active {
  color: blue;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175);  
}

JS :

$("#chi").hide();
  $("#hs1").click(function(){
      $(this).toggleClass('active');
            if($('#chi').is(':hidden')){
      $("#chi").toggle(500);}
      else{$("#chi").hide(1000);}
  });

answered May 19 '17 at 13:18

Vincent G

8,547
1
18
36

Not work with bootstrap3 :( https://jsfiddle.net/vo1npqdx/802/ – lausent May 19 '17 at 13:41
That's because "active" is a name of a generic class in Bootstrap, you have to change the name, here's a working example : https://jsfiddle.net/vo1npqdx/804/ – Vincent G May 19 '17 at 13:45
check the border color and text color because they doesn't return to the original color when re-click – lausent May 19 '17 at 13:48
I added a line in the javascript "blur" to avoid keeping the focus when you click : https://jsfiddle.net/vo1npqdx/810/ – Vincent G May 19 '17 at 13:55
Now works pretty well with single button. Last problem: if I have two button and each one comand a appear/disappear container? If I implement your code the focus not work good. Infact when I click one button1 it focus but if I click also the other button2 the focus don't disappear on the button1 and the final result is two focus and this is bad. – lausent May 19 '17 at 14:23
Yes you have to adapt name of the class and also the javascript by using $(this) to refer to the current element you're clicking. – Vincent G May 19 '17 at 14:25
here the example: https://jsfiddle.net/vo1npqdx/813/ I don't understand where I mistake :/ – lausent May 19 '17 at 14:28
Done, now works! https://jsfiddle.net/vo1npqdx/819/ – lausent May 19 '17 at 14:35

How focus off on a toggle button?

1 Answers1