Expanding List
I need to have another practise page - Please do not take what you see here as anything definitive - it is test page.
The list will be based on the accordian unless I can find a better way.
The sandbox will be used to experiment on formatting etc.
The customisation section will detail changes. The purpose of this is to minimise content on the main page and detail is only revealed when a section is clicked.
panel class now eases out in 0.2s
accordian class has a transistion of 0.4 seconds (the time it takes to change colour when the cursor hovers.
The list (accordian class) has a width of 50% but justifies left. The panel class has been left at 100%.
For this example I have left the symbols on the accordian the same as the original example. See the version I developed for a possible sitemap - here I used symbols/icons for hands up and hands down - could also use awesome icons.
Looks like I can over-ride some of the formatting
This century has Botetourt being the "Lord" of the manor.
There is a LOT going on in this script!
It has been the inspiration for many other pages on this website.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
There is a LOT going on with this code and it has been a valuable learning tool for me. There are many aspects of DOM Event Handling to be discussed here along with the concept of Bubbling and Capturing.
Other pages related to this one
The JavaScript shown above prompted the pages:
- getElementsByClassName
- addEventListener
- classList
- nextElementSibling - previousElement actually - this is related to the Sub-Menu used on my current page template.
- scrollHeight - maxHeight