3

Problem: I want to have the submit button of my search box (HTML Form) to be hidden until the user clicks into the text input box.

HTML:

<div class="views-exposed-form">
 <div class="views-exposed-widgets clearfix">
  <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
   <div class="views-widget">
    <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
     <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
    </div>
   </div>
  </div>
  <div class="views-exposed-widget views-submit-button">
   <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">   
  </div>
 </div>
</div>

What I have tried I know you can use at least some type of conditions when working with CSS. Like this right here: how-to-affect-other-elements-when-a-div-is-hovered

My problem now is that my elements are not directly inside of each other. I already played around with something like showing the button when hovering over wrapper div.

It is hidden like this: 

#block-views-exp-display-products-page .views-submit-button {
  visibility: hidden;
}

What I actually need now is something like this: 

#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
  visibility: visible;
}

But I dont know how to do that.

Edit:

In case anyone comes across this, this is my final solution: 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('click', function(){
         $("#edit-submit-display-products").css("visibility", "visible");
      });
   });
</script>
<script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('focusout', function(){
        if (!$("#edit-submit-display-products").is(":hover")) {
          $("#edit-submit-display-products").css("visibility", "hidden");
          }
      });
   });
</script>

This will hide the button whenever you click outside of the input field and prevents the button from disappearing when trying to click on it.

JT 1114
  • 73
  • 1
  • 11
  • Your question implies a CSS only solution. If this is not required, you can add a `onclick` in your submit button, which triggers a JS function to change the search box visible. – Mitchell van Zuylen Oct 13 '17 at 11:15
  • I have tbh never worked with JavaScript, thatswhy I am focused on the CSS only solution if this was possible. But I guess its going to done faster in JS than looking for a workaround in CSS. – JT 1114 Oct 13 '17 at 11:17
  • Yes. In general, if you want to do something on your site to be interactive (like this) I'd recommend JS. There's a few exceptions to this rule of course. – Mitchell van Zuylen Oct 13 '17 at 11:41

2 Answers2

7

You can leverage :focus-within.

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

MDN

Support is non-IE/Edge though.

Something like:

.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within + .views-submit-button input {
  visibility: visible
}


.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within+.views-submit-button input {
  visibility: visible
}
<div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
    <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
      <div class="views-widget">
        <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
          <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
        </div>
      </div>
    </div>
    <div class="views-exposed-widget views-submit-button">
      <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
    </div>
  </div>
</div>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
2

You could add Javascript (jquery) to solve this problem:

<script src="code.jquery.com/jquery-latest.min.js"></script>

<script>
 $(document).ready(function() {
    $("#edit-search-api-views-fulltext").on('click', function(){
       $("#edit-submit-display-products").css("visibility", "visible");
    });
 });
</script>
David
  • 1,084
  • 12
  • 36
  • I dont really want/ can maniulate the HTML of the site. Is there another way to make this happen with JS? – JT 1114 Oct 13 '17 at 11:27
  • You just need to add two Script tags in the HTML head section: – David Oct 13 '17 at 11:29
  • I have copied that in my template. After reloading the page, it threw 2 errors (could not get path). I changed the path of your link to https://code... and then tried again. When I inspect the source code now, I only see the the first script. – JT 1114 Oct 13 '17 at 12:13
  • this should do it: – David Oct 13 '17 at 12:51
  • For me it looks like there is a syntax error in your script (` – JT 1114 Oct 13 '17 at 12:58
  • i edited my answer. just copy it and paste it in your and it will work. – David Oct 13 '17 at 13:09
  • unfortunally not. I dont get any errors, just no changes on the site. – JT 1114 Oct 13 '17 at 14:34
  • 1
    sry, i forgot an important element (documentreadyfunction) it will work now! if it still doesn't work though, i can't help you. – David Oct 13 '17 at 16:16
  • Works fine now, thank you very much! I guess I wont have a problem creating a second function now based on that! – JT 1114 Oct 13 '17 at 16:33
  • I'm glad I could help ;) – David Oct 13 '17 at 23:30
  • In case someone reads this, I have put my final solution in the Question. – JT 1114 Oct 16 '17 at 11:11
  • i'd strongly recommend to use "jquery-latest.min" link, like seen above. So you'll always get the newest version of jquery. – David Oct 16 '17 at 12:57
  • But if any updates will be done do this, that could break my scripts right? – JT 1114 Oct 16 '17 at 13:25
  • its very very unlikely that they would change anything of that, what you're using. But you are correct, if thats your only jquery code, you can leave it like this. – David Oct 16 '17 at 13:58