Currently, I am using frames to divide a window into sections. In this setup, I have incorporated four HTML pages.
In the test.html file, I have divided all the frames and added a dropdown box in bottom.html. When the dropdown box is clicked, the frame should expand to display options, and if no option is selected, the frame size should reduce.
If you need more context on this requirement, please refer to the following URL: Reference
Here is my test.html code:
<!DOCTYPE html>
<html>
<head>
<style>
.expanded {
background-color: #e3e3e3;
width: 100px;
height: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("input[type='checkbox'").click( function() {
if($("input[type='checkbox']:checked").length > 0) {
$("frame[name='bottom_page']").addClass("expanded");
} else {
$("frame[name='bottom_page']").removeClass("expanded");
}
});
</script>
</head>
<frameset cols="30%,100%">
<frameset rows="70,200">
<frame src="top.html" name="top_page" />
<frame src="bottom.html" name="bottom_page" />
</frameset>
<frame src="main.html" name="main_page" />
</frameset>
</html>
This is my bottom.html code:
<html>
<head>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>
</head>
<body bgcolor="#B5DCB3">
<script>
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()" >
<select>
<option>Select Country</option>
</select>
<div class="overSelect" id="selectId"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>Afghanistan</label>
<label for="two"><input type="checkbox" id="two"/>Aland Islands</label>
<label for="three"><input type="checkbox" id="three"/>Albania</label>
<label for="four"><input type="checkbox" id="four"/>Algeria</label>
<label for="five"><input type="checkbox" id="five"/>American Samoa</label>
<label for="six"><input type="checkbox" id="six"/>Andorra</label>
<label for="seven"><input type="checkbox" id="seven"/>Angola</label>
<label for="eight"><input type="checkbox" id="eight"/>Anguilla</label>
</div>
</div>
</form>
</body>
</html>
I would appreciate any suggestions or guidance on this matter...