title: Search through Accordion a tags via search input
body: <p>i have an search input field and underneath an accordion with links in the body. Now I want to use the search input to look for an <code>&lt;a&gt;</code> item within the accordion. It should basically expand when it is found and having a background colour.</p>
  
  <p>Not sure how to loop through the items, I assume using jquery might be better than JS?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top:10px;"&gt;
          &lt;h1&gt;Settings &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" style="padding-top:5px;"&gt;
        &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
          &lt;input class="input-sm form-control form-control-sm" type="search" placeholder="search for setting..." id="search_settings" style="font-size:12px;margin-top:5px;"&gt;
          &lt;div class="panel-group" role="tablist" aria-multiselectable="true" id="accordion-1"&gt;
            &lt;div class="panel panel-default card" style="margin-bottom:5px;margin-top:5px;"&gt;
              &lt;div class="panel-heading card-header" role="tab"&gt;
                &lt;h4 class="panel-title"&gt;&lt;a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1"&gt;Property &lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="panel-collapse collapse item-1" role="tabpanel"&gt;
                &lt;div class="panel-body"&gt;
                  &lt;span&gt;&lt;small&gt; Property related&lt;/small&gt;&lt;/span&gt;
                  &lt;a href="#set1" class="nav-link" data-toggle="pill"&gt;Link 1&lt;/a&gt;
                  &lt;a href="#set2" class="nav-link" data-toggle="pill"&gt;Link 2&lt;/a&gt;
                  &lt;a href="#set3" class="nav-link" data-toggle="pill"&gt;Link 3&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="panel panel-default card" style="margin-top:5px;margin-bottom:5px;"&gt;
              &lt;div class="panel-heading card-header" role="tab" style="margin-top:0px;"&gt;
                &lt;h4 class="panel-title"&gt;&lt;a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2"&gt;Location &lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="panel-collapse collapse item-2" role="tabpanel"&gt;
                &lt;div class="panel-body"&gt;
                  &lt;span&gt;Property related&lt;/span&gt;
                  &lt;a href="#set4" class="nav-link" data-toggle="pill"&gt;Link 4&lt;/a&gt;
                  &lt;a href="#set5" class="nav-link" data-toggle="pill"&gt;Link 5&lt;/a&gt;
                  &lt;a href="#set6" class="nav-link" data-toggle="pill"&gt;Link 6&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="panel panel-default card" style="margin-top:5px;margin-bottom:5px;"&gt;
              &lt;div class="panel-heading card-header" role="tab"&gt;
                &lt;h4 class="panel-title"&gt;&lt;a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3"&gt;User &lt;/a&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="panel-collapse collapse item-3" role="tabpanel"&gt;
                &lt;div class="panel-body"&gt;
                  &lt;span&gt;Property related&lt;/span&gt;
                  &lt;a href="#set7" class="nav-link" data-toggle="pill"&gt;Link 7&lt;/a&gt;
                  &lt;a href="#set8" class="nav-link" data-toggle="pill"&gt;Link 8&lt;/a&gt;
                  &lt;a href="#set9" class="nav-link" data-toggle="pill"&gt;Link 9&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"&gt;
          &lt;div class="tab-content"&gt;
            &lt;div id="set1" class="tab-pane active"&gt;
              &lt;h5&gt;Set 1&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 1&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set2" class="tab-pane"&gt;
              &lt;h5&gt;Set 2&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 2&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set3" class="tab-pane"&gt;
              &lt;h5&gt;Set 3&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 3&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set4" class="tab-pane"&gt;
              &lt;h5&gt;Set 4&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 4&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set5" class="tab-pane"&gt;
              &lt;h5&gt;Set 5&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 5&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set6" class="tab-pane"&gt;
              &lt;h5&gt;Set 6&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 6&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set7" class="tab-pane"&gt;
              &lt;h5&gt;Set 7&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 7&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set8" class="tab-pane"&gt;
              &lt;h5&gt;Set 8&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 8&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="set9" class="tab-pane"&gt;
              &lt;h5&gt;Set 9&lt;/h5&gt;
              &lt;p&gt;This is content of Tab 9&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>