0

How can I focus the div of a bootstrap collapse using jquery. Here is my script: 

<div class="tab-pane fade in active" id="home1">
  <div id="treeMapCategory">
    <h2 class="m-b-xxs">Defect Categories<span class="btn btn-primary btn-xs pull-right" id="defectCategories" data-toggle="collapse" data-target="#insightDefectCategories"><i class="fas fa-comments"></i> Add Insights</span></h2>
  </div>
</div><br/>
<div class="collapse" id="insightDefectCategories" tabindex="1">
  <div class="ibox-content box">
    <div class="insightsTitle"><br/>
      <h3> <i class="fas fa-comments"></i> Insights for Defect Categories</h3>
    </div>
  </div>
</div>
Dranier
  • 311
  • 1
  • 5
  • 26
  • Possible duplicate of [change focus into particular div](https://stackoverflow.com/questions/3777580/change-focus-into-particular-div) – DragonBorn Jul 02 '18 at 07:36
  • I tried that but I think it cannot focus on that div because it is hidden I think – Dranier Jul 02 '18 at 08:06

1 Answers1

0

Is this what you want?

$("#insightDefectCategories").first().focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="tab-pane fade in active" id="home1">
  <div id="treeMapCategory">
    <h2 class="m-b-xxs">Defect Categories<span class="btn btn-primary btn-xs pull-right" id="defectCategories" data-toggle="collapse" data-target="#insightDefectCategories"><i class="fas fa-comments"></i> Add Insights</span></h2>
  </div>
</div><br/>
<div class="collapse" id="insightDefectCategories" tabindex="1">
  <div class="ibox-content box">
    <div class="insightsTitle"><br/>
      <h3> <i class="fas fa-comments"></i> Insights for Defect Categories</h3>
    </div>
  </div>
</div>
Karthik
  • 112
  • 8