How to focus on a div that has just appeared?

Question

I have this component:

$chevron.on('click', function(e) {
  e.preventDefault();
  $('.disclaimer-wrapper').slideDown('fast', function() {
    $(this).focus();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
  <div class="disclaimer-wrapper"> //this div is hidden Hidden Content
  </div>
</section>

I am trying to click on an anchor ($chevron) and then display the element .disclaimer-wrapper but the document is not focusing or scrolling down to that element when it appears so the user can't see the new content being displayed.

What am I missing?

`$.focus()` I don't think that means what you think it means. https://api.jquery.com/focus/ what do you mean focus on it? You want the browser to scroll so that element's in view? — Michael Coker, Jun 10 '17 at 03:50
Possible duplicate of [Scroll to a div using jquery](https://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery) — Matt, Jun 10 '17 at 03:51

score 0 · Answer 1 · edited Jun 10 '17 at 05:28

0

jQuery Focus does not work on divs, however there is a workaround to that, in simple words, you need to set the tab index of div to -1, like this:

$('#chevron').on('click', function(e) {
  e.preventDefault();
  $('.disclaimer-wrapper').slideDown('fast', function() {
    $(this).attr("tabindex", -1).focus();
  });
});

.disclaimer-wrapper {
  display: none;
}

.disclaimer-wrapper:focus {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="footer">
  <a href="#" id="chevron">click</a>
  <div class="disclaimer-wrapper"> //this div is hidden Hidden Content
  </div>
</section>

here is a fiddle of it, you can check it out.

edited Jun 10 '17 at 05:28

Milan Chheda

8,159
3
20
35

answered Jun 10 '17 at 04:44

Talha Abrar

880
8
22

The answer is not fully correct. It is possible to focus on div as long as the div has `contentEditable` attribute – Jun 10 '17 at 07:42
According to the jQuery focus docs https://api.jquery.com/focus/, tab index is the way to make focus function work on a div, not contentEditable property. – Talha Abrar Jun 10 '17 at 08:42
Perhaps, I don't work with jQuery, but you said: *jQuery Focus does not work on divs*, and jQuery, is JavaScript. and when div has `contentEditable`, you can focus it, so you can do the exact same thing (at least I think so) with jQuery. – Jun 10 '17 at 08:51

How to focus on a div that has just appeared?

1 Answers1