Home/ Questions/Q 8446335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:54:15+00:00

I have been trying to create a form that having 4 elements. One is

  • 0

I have been trying to create a form that having 4 elements. One is a dropdown box of checkboxes and the other are simple checkboxes. I am trying to place them one below the other. The difficulty is when the dropdown with the checkboxes are clicked the other dropdown slide down. On closing the dropdown with the checkboxes they slide up again. I am trying to place them one below the other, so that if the dropdown with checkboxes is clicked the other simply become invisible and not slide down. when the the dropdown of checkboxes is closed the remaining dropdown simply show up. Could someone please help me on this. I am trying to emulate something like the filters on luxuryretreats.com

Below is the code. 

<html>
<head>
<script type="text/javascript">
function ExposeList1() {
    var showstatus = document.getElementById('ScrollCountry').style.visibility;
    if (showstatus == 'hidden') {
        document.getElementById('ScrollCountry').style.visibility = "visible";
        document.getElementById('Scrollguests').style.visibility = "hidden";
        document.getElementById('Scrollminprice').style.visibility = "hidden";
        document.getElementById('Scrollmaxprice').style.visibility = "hidden";
    } else {
        document.getElementById('ScrollCountry').style.visibility = 'hidden';
        document.getElementById('Scrollguests').style.visibility = "visible";
        document.getElementById('Scrollminprice').style.visibility = "visible";
        document.getElementById('Scrollmaxprice').style.visibility = "visible";
    }
}
</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 id="ScrollCountry"
            style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
            <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 &amp; Caicos">Turks &amp; Caicos<br>
        </div>


<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2"  value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>

<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2"  value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>   
</div>

<br />      

<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I changed it to use display instead of visibility since it makes more sense and works better. And since the #ScrollCountry now is above the checkboxes there is no need to hide them anymore.

    <!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <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';
            }
        }
    </script>
    <style>
        fieldset{ border: 0; padding: 0; position: relative }
        #ScrollCountry{ 
            height: 120px; 
            width: 150px; 
            overflow: auto; 
            border: 2px solid orange;
            display:none;
            border-radius:10px;
            position: absolute;
            background: #fff;
        }
    </style>
</head>
<body>

    <form action="trying.php" method="post">
        <fieldset>
            <img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">

            <div id="ScrollCountry">
                <input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
                <input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
                <input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
                <input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
                <input type="checkbox" id="scb5" name="c5" value="Turks &amp; Caicos"><label for="scb5">Turks &amp; Caicos</label><br>
            </div>

            <div id="Scrollguests">
                <select>
                    <option id="n1" value="4">2 - 4</option>
                    <option id="n2"  value="6">4 - 6</option>
                    <option id="n3" value="8">6 - 8</option>
                    <option id="n4" value="10">8 - 10</option>
                    <option id="n5" value="30">10+</option>
                </select>
            </div>

            <div id="Scrollminprice">
                <select>
                    <option id="mn1" value="200">200</option>
                    <option id="mn2"  value="300">300</option>
                    <option id="mn3" value="400">400</option>
                    <option id="mn4" value="500">500</option>
                    <option id="mn5" value="600">600</option>
                </select>
            </div>

            <div id="Scrollmaxprice">
                <select >
                    <option id="mx1" value="600">600</option>
                    <option id="mx2" value="700">700</option>
                    <option id="mx3" value="800">800</option>
                    <option id="mx4" value="900">900</option>
                    <option id="mx5" value="1000">1000</option>
                </select>
            </div>
            <input type="submit">
        </fieldset>
    </form>

</body>
</html>
    • 0