Show checkboxes tethered beneath input box on click

Question

I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right). Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.

I've tried the following, but that shows my checkboxes through/behind the text that's already there.

.change-search__form-container {
  display: none;
  position: absolute;
  width: 300px;
  background: #fff;
  border: #000;
  border-width: 1px;
}

Have a look at this fiddle http://jsfiddle.net/gx8f2zeu/ from https://stackoverflow.com/questions/27922345/display-a-div-below-a-selected-input-field-no-jquery — , Jan 25 '18 at 14:34
@TanmayGawankar That's about the same as what I do, and it also places the dropdown behind the text that already exists. — Anna Vos, Jan 25 '18 at 14:43
Ok. So you want the div with those checkboxes to appear when the user focuses in the searchbox and when do you expect the box to close? i am assuming after the user leaves the page by search? — , Jan 25 '18 at 14:45
@SimianAngel I didn't know about setting z-index yet, thanks! Working to figure out how to actually show the form on click now - that doesn't work yet. — Anna Vos, Jan 25 '18 at 14:47
@Pete Couldn't you technically write `:hover` and `:focus` rules for a container around the checkboxes and the checkboxes themselves wich would keep them visible? That would be a pure css solution. — gforce301, Jan 25 '18 at 14:48
@TanmayGawankar On clicking a 'search' button at the bottom on my container (forgot to add that to the image example). But the main thing now is to actually show this container on clicking the input. — Anna Vos, Jan 25 '18 at 14:48
@gforce301 you are correct, it works a lot better and then disappears when you have finished in the box too, although it is not clear to the users that you need to focus the textbox to make it appear http://jsfiddle.net/gx8f2zeu/83/ so would probably still be a usability issue ( i know from us doing a lot of user testing that things like this always stump the end user!) — Pete, Jan 25 '18 at 14:52

score 2 · Answer 1 · edited Jan 26 '18 at 06:28

2

A pure css solution based on previous answers and Pete's comments.

#myDiv{
  display:none;
}

#myDiv:hover, #myDiv:focus-within {
  display: block;
}

#myInput:focus + #myDiv {display:block}

<input id="myInput" placeholder="search query">
<div id="myDiv">
  <input type="checkbox" id="box1">
  <label for="box1">Stuff 1</label>
  <input type="checkbox" id="box2">
  <label for="box2">Stuff 2</label>
  <br>
  <input type="checkbox" id="box3">
  <label for="box3">Stuff 3</label>
  <input type="checkbox" id="box4">
  <label for="box4">Stuff 4</label>
</div>

edited Jan 26 '18 at 06:28

VXp

11,598
6
31
46

answered Jan 25 '18 at 15:00

gforce301

2,944
1
19
24

nice use of focus-within - not seen that one before :) – Pete Jan 25 '18 at 15:26
1

I hadn't either. I did a quick search that led me here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within – gforce301 Jan 25 '18 at 15:29
Be aware that at this time `:focus-within` browser support is incomplete. https://caniuse.com/#feat=css-focus-within – SimianAngel Jan 25 '18 at 17:10

Ufuk Onder · Answer 2 · 2018-01-25T15:31:03.443

0

there is a great post for a very similar problem: Css Focus on input div appearing

Runs for Safari and soon in chrome..

#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }

<div id="MyDiv1">
 <input id="myInput" type="text"/>
 <div id="myDiv2">
  <label class="container">One
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
  </label>
 </div>
 <div style="display:none">
  <span> aaa </span>
 </div>
</div>

edited Jan 25 '18 at 15:31

answered Jan 25 '18 at 14:44

Ufuk Onder

786
7
9

This doesn't work with checkboxes - as soon as you click a checkbox the checkbox container disappears. – Anna Vos Jan 25 '18 at 14:50

score 0 · Answer 3 · answered Jan 25 '18 at 14:52

0

The DIV can be shown by using the below jQuery code

$("#searchbox").focus(function(){
    $("#searchresults").show();
});

By using this code the DIV won't go away if the focus from textbox is lost

answered Jan 25 '18 at 14:52

score 0 · Accepted Answer · answered Jan 25 '18 at 15:04

I solved the problem with the help of the comments. My CSS:

#change-search__form-container {
  position: relative;
}
#change-search__dropdown-form {
  z-index: 1;
  display: none;
  position: absolute;
  width: 300px;
  background: #fff;
  border: #000;
  border-width: 1px;
}

My jQuery:

$('#change-search__form-container').click(function () {
  $('#change-search__dropdown-form').show();
});

This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).

Show checkboxes tethered beneath input box on click

4 Answers4