I am using three radio button for showing three different divs. But it is not working.
here is my script
<script>
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
</script>
Here is my js-fiddle of demo of my work :
http://jsfiddle.net/sam050/PHu99/
Try this
HTML
<div class="usertype">
<ul>
<li id="userpr">
<label>I want to:</label>
<input type="radio" name="Want_To" value="sell" id="Sell" checked />
<label class="new-label selected" for="Sell">Sell</label>
<input type="radio" name="Want_To" value="rent" id="Rent/Lease" />
<label class="new-label" for="Rent/Lease">Rent/Lease</label>
<input type="radio" name="Want_To" value="PG" id="Want-To-PG" />
<label class="new-label" for="Want-To-PG">PG</label>
</li>
</ul>
<div id="sell">Show sell div</div>
<div id="rent">Show rent div</div>
<div id="PG">Show PG div</div>
</div>
Script
$(document).ready(function() {
$("#sell,#rent,#PG").hide();
$("input[name$='Want_To']").click(function() {
var test = $(this).attr('value'); console.log(test)
$("#"+test).show().siblings('div').hide();
});
});
DEMO
.usertype{ border-bottom: 1px solid #E3E3E3; padding: 15px 12px;}
.usertype ul{margin-top:0px;}
.usertype ul li{margin-bottom:15px;}
.usertype ul li label{margin: 0px 15px 0px; width:160px;display:inline-block;vertical-align: top;background: none;
border: none; color: #666;}
.usertype input[type="radio"]:checked + .new-label{ color:#2C96D0 !important; border-color:#2c97d3; background:#2C96D0; }
.usertype ul li label.new-label {
width: auto;
margin-left: 15px;
color: #9E9E9E;
display: inline-block;
font: 700 13px/31px Open Sans Bold,Arial,Helvetica,sans-serif;
padding: 0px 10px;
background: linear-gradient(to bottom, #E8E8E8 0%, #FFF 100%) repeat scroll 0% 0% transparent;
border: 1px solid #D6D6D6;
border-radius: 5px;}
.usertype input {
margin-right: -30px;
}
#sell,#rent,#PG
{
display:none;
}
and your js
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
$('#sell,#rent,#PG').hide();
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
I have used little bit different approach here
Chec here demo Demo
You need to change the values of your radio-elements according to your div,
Also make a common class for all div containers, so that only one div would be shown at a time,
Try t like,
$(document).ready(function () {
$(".item-div").hide();
// show checked radio div
$('#'+$('[name="Want_To"]:checked').val()).show();
$("input[name='Want_To']").click(function () {
var test = $(this).val();
$(".item-div").hide();
$("div.desc").hide();
$("#" + test).show();
});
});
Live Demo
first add jquery on yopur page
then HTML would be
<div class="usertype">
<ul>
<li id="userpr"><label>I want to:</label>
<input type="radio" name="Want_To" value="sell" checked /><label class="new-label selected" for="Sell">Sell</label>
<input type="radio" name="Want_To" value="rent" /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
<input type="radio" name="Want_To" value="PG" /><label class="new-label" for="Want-To-PG">PG</label> </li>
<div id="sell" class="desc">
Show sell div
</div>
<div id="rent" class="desc">
Show rent div
</div>
<div id="PG" class="desc">
Show PG div
</div>
</ul>
</div>
and javascript code would be
$(document).ready(function(){
$("input[type='radio']").change(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
Updated script and Add Jquery
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
and updated html
<div class="usertype">
<ul>
<li id="userpr"><label>I want to:</label>
<input type="radio" name="Want_To" value="sell" id="Sell" checked /><label class="new-label selected" for="Sell">Sell</label>
<input type="radio" name="Want_To" value="rent" id="Rent/Lease" /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
<input type="radio" name="Want_To" value="PG" id="Want-To-PG" /><label class="new-label" for="Want-To-PG">PG</label> </li>
<div id="sell" class="desc" style="display:none">
Show sell div
</div>
<div id="rent" class="desc" style="display:none">
Show rent div
</div>
<div id="PG" class="desc" style="display:none">
Show PG div
</div>
</ul>
</div>
I hope this will work for you Good Luck!
Try this Fiddle.
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
var test = $(this).val();
console.log("#"+test);
$(".a").hide();
$("#"+test).show();
});
});
Related
I have a survey page where users can click buttons on a scale from 1-5 to say how their experience was. Currently, clicking one button (say 3 out of 5) will change the background color of that one button to indicate it was clicked. What is the best way to approach this if I want to have all buttons have the updated background color up to whatever was clicked? Example: If they click "3" out of 5 then it would highlight buttons 1, 2, and 3.
Any help appreciated.
HTML:
<section class="l-reviews pt-30 pb-15">
<div class="contain">
<div class="row">
<div class="col-md-12">
<div class="reviews-wrapper">
<div class="reviews-top-header">
<p id="">Thank you for taking part. Please complete this survey to let us know how we’re
doing.</p>
<p>Please rate the following on a 1-5 scale (1 = Least, 5 = Most)</p>
</div>
<div class="reviews-body">
<form method='post' name='front_end' action="">
<div class="form-control">
<p>1. Were the payroll process and benefits options explained to you fully?</p>
<div class="input-holder">
<input type='hidden' name='title' value='' />
<input type='hidden' name='email' value='' />
<input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label>
<input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label>
<input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label>
<input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label>
<input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label>
</div>
</div>
<button type="button" class="send-btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Javascript:
$('.send-btn').click(function(e) {
e.preventDefault();
let checkOne = false;
let checkTwo = false;
let checkThree = false;
let checkFour = false;
let checkFive = false;
CSS:
#wr-1:checked+label,
#application-rating-1:checked+label,
#goals-rating-1:checked+label,
#refer-rating-1:checked+label,
#sat-1:checked+label {
background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
height: 55px;
width: 109px;
display: inline-block;
padding: 0 0 0 0px;
background-repeat: no-repeat;
}
Native checkboxes can't be styled, so you can't easily add a checked appearance to an unchecked checkbox. You can however hide the native appearance, and do some CSS trickery to show a checkbox with round border.
With this you can use jQuery (or native JS) to add a checked appearance to round borders, here to all checkboxes preceding the current one:
$(function() {
$('.form-control input[type="radio"]').click(function(e) {
let $el = $(this);
console.log('clear all highlights');
$el.parent().find('input[type="radio"]').css({ backgroundColor: '#FF572233' });
let id = $el.attr('id');
do {
if(id) {
console.log('highlight', id);
$el.css({ backgroundColor: '#993333' });
}
$el = $el.prev().prev();
id = $el.attr('id');
} while(id);
});
});
.form-control input[type="radio"] {
height: 0.9rem;
width: 0.9rem;
margin-right: 0.5rem;
/* The native appearance is hidden */
appearance: none;
-webkit-appearance: none;
/* For a circular appearance we need a border-radius. */
border-radius: 50%;
/* The background will be the radio dot's color. */
background: #FF572233;
/* The border will be the spacing between the dot and the outer circle */
border: 3px solid #FFF;
/* And by creating a box-shadow with no offset and no blur, we have an outer circle */
box-shadow: 0 0 0 1px #FF5722;
}
.form-control input[type="radio"]:checked {
background: #993333;
}
.send-btn {
margin-top: 15px;
}
.as-console-wrapper { max-height: 85px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="l-reviews pt-30 pb-15"> <div class="contain"> <div class="row"> <div class="col-md-12"> <div class="reviews-wrapper"> <div class="reviews-body"> <form method='post' name='front_end' action=""> <div class="form-control"> <p>1. Were the payroll process and benefits options explained to you fully?</p> <div class="input-holder"> <input type='hidden' name='title' value='' /> <input type='hidden' name='email' value='' /> <input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label> <input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label> <input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label> <input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label> <input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label> </div> </div> <button type="button" class="send-btn">Submit</button> </form> </div> </div> </div> </div> </div> </section>
What I try to achieve:
I'm working on a code, which does fetch categories together with other elements from a database (php & mysql).
These elements/nodes are all in a "<label> ... </label>" for a radio button.
If a user clicks on one of these labels for a radio button, the category name and an img, which are also in the label, should how up ALSO in a other "<div id="selection"> ... </div>".
What does work:
By clicking on a radiobutton/label, I already can fetch the radioButton value (in my case the value must be the the category id).
What doesn't work:
I cant fetch the other elements in this label and display it ALSO in a other span
VERY IMPORTANT!: The content in the labels getting fetched from a database, so it is dynamically!
Here is a simple version of my code without php elements, but the output should be kinda the same.
function check() {
var radioBttn = document.querySelectorAll("input[name = 'pet']");
var countRadioBttn = radioBttn.length;
for (i = 0; i < countRadioBttn; i++) {
if (radioBttn[i].checked) {
selection.innerHTML = "You selected a/n " + radioBttn[i].value + ",<br>good choice!";
}
}
}
*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
<div id="option">
<b>Option Box</b>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:3">
<span>Hamster</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:4">
<span>Mammoth</span>
<img src=""></img>
</label>
</div>
<div id="selection">
No selection yet
</div>
Do you mean this?
var rads = document.querySelectorAll("input[name=pet]");
for (var i = 0; i < rads.length; i++) {
rads[i].addEventListener("click", function() {
var parentLabel = this.closest("label");
document.getElementById("selection").innerHTML =
"You selected a/n " + this.value + ",<br>good choice!" +
"<span>" + parentLabel.querySelector("span").innerHTML + "</span>" +
"<img src='" + parentLabel.querySelector("img").src + "'/>";
});
};
*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{ width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
label>img { height:25% }
<div id="option">
<b>Option Box</b>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src="https://lorempixel.com/output/cats-q-c-200-200-5.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-8.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:3">
<span>Rhino</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-1.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:4">
<span>Tiger</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-3.jpg" />
</label>
</div>
<br style="clear:both" />
<div id="selection">
No selection yet
</div>
Im sorry to open a question, which I am sure many will consider very basic but I don't really know javascript and am learning as my application grows
I have the following
When radio button is clicked I would like the div with class="teams" to change border colour to red.
I came up with this code
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';
function border(){
if(document.getElementById("one").checked){
document.getElementById("teams").style.borderColor="red"
}
else if( document.getElementById("two").checked){
document.getElementById("teams").style.borderColor="red"
}
}
echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />';
echo'<img src="images/teams/'.$src2.'.png" id="t2" />';
echo'</div>';
Clearly I am doing something wrong. Any help will be greatly appreciated
Following is the error thrown.
teams is a class attribute and not ID.
Change getElementById("teams") to getElementsByClassName("teams")
Note that getElementsByClassName("teams") returns an array of matched elements; so use a loop to set the value of each or just use getElementsByClassName("teams")[0].style.borderColor
function border() {
var el = document.getElementsByClassName("teams")[0];
if (document.getElementById("one").checked || document.getElementById("two").checked) {
el.style.borderColor = "red";
el.style.borderStyle = "solid";
}
}
Try onclick="border(this.id)"
<labe><input type="radio" onclick="border(this.id)" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" border(this.id)" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
function border(id){
if(document.getElementById(id).checked){
document.getElementsByClassName('teams')[0].style.borderColor="red"
}
}
Working demo
In your code teams is a class name and not id.
echo'<div class="teams">';
Either you change it to id:
echo'<div id="teams">';
Or use getElementsByClassName("teams"), it will give you NodeList
document.getElementsByClassName("teams")[0].style.borderColor="red";
Apart from this, you could possibly try this solution just using css pseudo:
input[type=radio].check {
display: none;
}
input[type=radio].check + label.check {
border: 1px solid grey;
padding: 5px 7px;
cursor: pointer;
width: 150px;
display: block;
text-align: center;
margin-bottom: 2px;
}
input[type=radio].check:checked + label.check {
background: red;
}
<input type='radio' name='team' value='Team 1' class='check' id='check1' />
<label for='check1' class='check'>Team 1</label>
<input type='radio' name='team' value='Team2' class='check' id='check2' />
<label for='check2' class='check'>Team 2</label>
<input type='radio' name='team' value='Draw' class='check' id='check3' />
<label for='check3' class='check'>Draw</label>
Just a little tip I would try and get away from using the onclick events and move towards external javascript.
I've created an example of something you could try.
$(':radio').change(function ()
{
if ($(this).val() == "team1")
{
$(".row").css("border-color", "blue");
}
else if ($(this).val() == "team2")
{
$(".row").css("border-color", "red");
}
});
div.row {
border: 2px solid black;
height: 200px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
</div>
<label for="team1">1</label>
<input id="team1" type="radio" name="team1" value="team1">
<label for="team2">2</label>
<input id="team2" type="radio" name="team2" value="team2">
How to limit checkbox selection to one using jquery or javascript and other checkbox should be disabled after one checkbox selected?
<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL
Here The Example But I Want Same Thing In Html Or Php
http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/
Problem Is Solved Now Here The Final Solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
$("input[type='checkbox']").on("click" , function(){
$("input[type='checkbox']").not(this).attr("disabled", "disabled");
});
Working Example
If you disable, user can't change his choice after first selection.
Here is a radio button behavior for checkbox.
$("input[type=checkbox]").on('click', function() {
$("input[type=checkbox]").not(this).attr('checked', false);
});
http://jsfiddle.net/BxF4Y/
But to doing that, the best way is to use radio buttons.
Browsing the source code of that page reveals the jQuery they used to achieve that effect. You should just be able to change the checkboxLimit to 1.
<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.checkboxLimit = function(n) {
var checkboxes = this;
this.toggleDisable = function() {
// if we have reached or exceeded the limit, disable all other checkboxes
if(this.filter(':checked').length >= n) {
var unchecked = this.not(':checked');
unchecked.prop('disabled', true);
}
// if we are below the limit, make sure all checkboxes are available
else {
this.prop('disabled', false);
}
}
// when form is rendered, toggle disable
checkboxes.bind('gform_post_render', checkboxes.toggleDisable());
// when checkbox is clicked, toggle disable
checkboxes.click(function(event) {
checkboxes.toggleDisable();
// if we are equal to or below the limit, the field should be checked
return checkboxes.filter(':checked').length <= n;
});
}
$("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);
});
</script>
Yes, this is an old thread, however there is no real conclusion here. I have included a fiddle with my version of how check-boxes should work should you wish to limit the number of boxes checked by the user.
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
<div class="downArrow"></div>
<h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
<input id="1" class="stick" type="checkbox" value="1" name="l-28">
<label class="stick" for="1">Dive Bar</label>
<br>
<input id="2" class="stick" type="checkbox" value="2" name="l-28">
<label class="stick" for="2">Pub</label>
<br>
<input id="3" class="stick" type="checkbox" value="3" name="l-28">
<label class="stick" for="3">Dance Club</label>
<br>
<input id="4" class="stick" type="checkbox" value="4" name="l-28">
<label class="stick" for="4">Pool Hall</label>
<br>
<input id="5" class="stick" type="checkbox" value="5" name="l-28">
<label class="stick" for="5">Karaoke</label>
<br>
<input id="6" class="stick" type="checkbox" value="6" name="l-28">
<label class="stick" for="6">Sports Bar</label>
<br>
<input id="7" class="stick" type="checkbox" value="7" name="l-28">
<label class="stick" for="7">Trendy</label>
<br>
</div>
/** END HTML **/
/** BEGIN JS **/
$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
if (nightLifeLimit == 2) {
$('input:checkbox[name="l-28"]').each(function () {
if ($(this).is(':checked')) {
return;
}
else {
$(this).prop('disabled', true);
}
});
}
else {
$('input:checkbox[name="l-28"]').each(function () {
$(this).prop('disabled', false);
});
}
});
/** END JS **/
/** BEGIN CSS **/
.cDropdown {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px inset #D3D3D3;
clear: right;
padding: 4px 3px;
width: 150px;
}
.cDropdown h4 {
font-size: 0.86em;
font-weight: normal;
margin: 0 0 0 1px;
padding: 0;
}
.downArrow {
border-left: 8px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgba(0, 0, 0, 0);
border-top: 8px solid #3C3C3C;
float: right;
height: 0;
margin: 3px 0 0 3px;
width: 0;
}
.multiCheckboxes {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3C3C3C;
display: none;
left: 9px;
max-height: 200px;
overflow: auto;
padding: 5px;
position: absolute;
top: 35px;
width: 146px;
z-index: 999;
}
.multiCheckboxes label {
float: none !important;
font-size: 0.9em;
width: 7.6em !important;
}
http://jsfiddle.net/defmetalhead/9BYrm/1/
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.