How to create a button that shows some inputs only when clicked/toggled?
SkylerX
I'm trying to create the exact same button (visually dropdown) "price range", like the one in this website: https://dubai.dubizzle.com/en/property-for-rent/residential/apartmentflat/
This button: 
/* CSS */
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
button {
display: flex;
-moz-box-pack: justify;
justify-content: space-between;
-moz-box-align: center;
align-items: center;
height: 100%;
color: black;
font-size: 14px;
box-sizing: border-box;
padding: 0px 6px 0px 12px;
border: 0px none;
width: 100%;
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
text-align: left;
cursor: pointer;
}
.lnhPTn {
position: absolute;
background: white none repeat scroll 0% 0%;
color: rgb(182, 184, 185);
margin-top: 4px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid rgb(43, 45, 46);
height: auto;
padding: 16px;
}
.kFCjgJ {
display: flex;
align-items: flex-end;
-moz-box-pack: center;
justify-content: center;
}
.gacQrk {
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: rgb(43, 45, 46);
}
.fmQggb {
display: block;
width: 180px;
border-radius: 6px;
border: 1px solid rgb(182, 184, 185);
height: 48px;
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
box-shadow: none;
}
..jaNqhG {
border: 0px none;
width: 8px;
margin: 0px 6px 18px;
height: 1px;
background: rgb(43, 45, 46) none repeat scroll 0% 0%;
}<!-- HTML -->
<!-- BUTTON STARTS HERE -->
<div class="button_wrapper">
<button type="button" class="button_price">
<span class="button_span">Any</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 9l6 6 6-6"></path>
</svg>
</button>
<div class="lnhPTn">
<div class="bkwgFh">
<div class="kFCjgJ">
<label class="gacQrk" for="min">
Min
<input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="min">
</label>
<span class="jaNqhG"></span>
<label class="gacQrk" for="max">
Max
<input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="max">
</label>
</div>
</div>
</div>
</div>
<!-- BUTTON ENDS HERE -->How to show the div below the button (the div which contain the inputs) only when clicking/toggling the button and automatically close when something else is clicked/toggled (like for instance the next button or search)?
Factouch
Simplest solution in 3 step-
- Add
onclick="document.querySelector('.lnhPTn').style.display=document.querySelector('.lnhPTn').style.display=='block'?'none':'block'"attribute on your button. - Add
<script>
window.onclick=function (e){
var buttonPrice =document.querySelector(".button_price");
var mainDiv=document.querySelector(".lnhPTn");
var inputs=document.querySelectorAll(".lnhPTn input")
console.log(inputs.length)
if(e.target!=buttonPrice && e.target!=mainDiv && e.target!=inputs[0] && e.target!=inputs[1]){
mainDiv.style.display="none";
}
}
</script>
at end of body tag.
- In css set main div's display to none.
So your final code will look like
button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
button {
display: flex;
-moz-box-pack: justify;
justify-content: space-between;
-moz-box-align: center;
align-items: center;
height: 100%;
color: black;
font-size: 14px;
box-sizing: border-box;
padding: 0px 6px 0px 12px;
border: 0px none;
width: 100%;
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
text-align: left;
cursor: pointer;
}
.lnhPTn {
display:none;
position: absolute;
background: white none repeat scroll 0% 0%;
color: rgb(182, 184, 185);
margin-top: 4px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid rgb(43, 45, 46);
height: auto;
padding: 16px;
}
.kFCjgJ {
display: flex;
align-items: flex-end;
-moz-box-pack: center;
justify-content: center;
}
.gacQrk {
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: rgb(43, 45, 46);
}
.fmQggb {
display: block;
width: 180px;
border-radius: 6px;
border: 1px solid rgb(182, 184, 185);
height: 48px;
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
box-shadow: none;
}
..jaNqhG {
border: 0px none;
width: 8px;
margin: 0px 6px 18px;
height: 1px;
background: rgb(43, 45, 46) none repeat scroll 0% 0%;
}<!-- HTML -->
<!-- BUTTON STARTS HERE -->
<div class="button_wrapper">
<button type="button" class="button_price" onclick="document.querySelector('.lnhPTn').style.display=document.querySelector('.lnhPTn').style.display=='block'?'none':'block'">
<span class="button_span">Any</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 9l6 6 6-6"></path>
</svg>
</button>
<div class="lnhPTn">
<div class="bkwgFh">
<div class="kFCjgJ">
<label class="gacQrk" for="min">
Min
<input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="min">
</label>
<span class="jaNqhG"></span>
<label class="gacQrk" for="max">
Max
<input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="max">
</label>
</div>
</div>
</div>
</div>
<!-- BUTTON ENDS HERE -->
<script>
window.onclick=function (e){
var buttonPrice =document.querySelector(".button_price");
var mainDiv=document.querySelector(".lnhPTn");
var inputs=document.querySelectorAll(".lnhPTn input")
if(e.target!=buttonPrice && e.target!=mainDiv && e.target!=inputs[0] && e.target!=inputs[1]){
mainDiv.style.display="none";
}
}
</script>Here's a working jsfiddle with this code https://jsfiddle.net/o48ps293/
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Mercurial: moving to a new repository structure - subrepos update
- Next: Can't Update database with Entity Framework Core
Related
TOP Ranking
- 1
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 2
pump.io port in URL
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
grouping by column variables and appending a new variable based on condition
- 5
Python Read Directory And Output to CSV
- 6
BigQuery - concatenate ignoring NULL
- 7
Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use
- 8
Remove adjacent duplicates in linked list in C
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
How to keep curl session alive between two php processes?
- 11
Limit number of characters in uitextview
- 12
Unable to use switch toggle for dark mode in material-ui
- 13
In C#, is there a way to create a List directly from an Array without copying?
- 14
Laravel getting value from another table using eloquent
- 15
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 16
MTKView Displaying Wide Gamut P3 Colorspace
- 17
Vector input in shiny R and then use it
- 18
Modify c# Windows Forms control library
- 19
SQL Server : are transaction locking table for other users?
- 20
When I click any button in my view page the form is submitted
- 21
Can you sort columns (horizontally) in Google Sheets?
Comments