Dropdown menu of multiple pages on one html page
I want to add multiple separate pages in one html page. I have the code for this already, but now I want to put the pages in the dropdown menu. For example, with the code I provided, I want 1 to be the only displayable item, and then if you click on it, a dropdown menu with 2 and 3. And then when 2 is selected, it is the only displayable item, but once you click on it, a drop-down menu appears with the rest of the items. I've been playing around with the code, but I don't know how to put them in this dropdown. Anyone have any solutions?
EDIT: I would prefer to create a dropdown menu without using a select box. I would like to customize the dropdown to look cleaner and separate from the page, and you cannot do that with a select box. I would like things like text to be centered, and when you drop out, drop out in a white box with no border / outline.
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
<p>Show page <span onclick="show('Page1');">1</span>, <span onclick="show('Page2');">2</span>, <span onclick="show('Page3');">3</span>.
</p>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
source to share
You can do it with jquery using the change event :
$("#drop").on('change', function() {
var value = $(this).val();
if (value) {
$(".page").hide();
$("#Page" + value).show();
}
});
span {
text-decoration: underline;
color: blue;
cursor: pointer;
}
.dropStyle {
width: 100px;
/*text-indent: 35px;*/
padding-left: 6%;
background-color: white;
/*border:none*/
border: 1px solid #e0e0e0;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show page
<select id="drop" class="dropStyle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
source to share