Add another class on a specific div on input focus
<p>I'm trying to find a solution for my searchbar problem. The searchbar should behave differently on smartphones so I need to add another class to the div, where the searchbar is placed.</p>

<p>When I click on the input field, the div with the class "highlighted" should get another class. Until now I just found solution to add a class to a next or partent div, but that's not what I was searching for.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="highlighted"&gt;
  &lt;div class="region region-highlighted"&gt;
    &lt;section id="block-x" class="contextual-region block clearfix"&gt;
      &lt;div data-contextual-id="block:block=x:langcode=en|block_content:block_content=20:changed=1462269631&amp;amp;ds_bundle=basic&amp;amp;ds_view_mode=default&amp;amp;langcode=en"&gt;&lt;/div&gt;
      &lt;div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"&gt;
        &lt;p&gt;x&lt;/p&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;div class="search-block-form contextual-region block block-search" data-drupal-selector="search-block-form" id="block-bootstrap-search" role="search"&gt;

      &lt;div data-contextual-id="block:block=bootstrap_search:langcode=en"&gt;&lt;/div&gt;
      &lt;form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8"&gt;
        &lt;div class="form-item js-form-item form-type-search js-form-type-search form-item-keys js-form-item-keys form-no-label form-group"&gt;
          &lt;label for="edit-keys--2" class="control-label sr-only"&gt;Search&lt;/label&gt;
          &lt;div class="input-group"&gt;
            &lt;input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" class="form-search form-control" placeholder="Search" type="search" id="edit-keys--2" name="keys" value="" size="15" maxlength="128"&gt;&lt;span class="input-group-btn"&gt;&lt;button type="submit" value="Search" class="button js-form-submit form-submit btn-primary btn icon-only" name=""&gt;&lt;span class="sr-only"&gt;Search&lt;/span&gt;&lt;span class="icon glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="edit-keys--2--description" class="description help-block"&gt;Enter the terms you wish to search for.&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="form-actions form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions"&gt;&lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>