The JavaScript previousElementSibling property
The use of this property is key to the operation of the layout of this page.
This property features in my code to implement an Accordian in a sidebar menu.
As seen on this page.
This is different from my
accordian not using the W3C framework. The Accordian with my own HTML uses the nextElementSibling
property after constructing a classList of the elements in the accordian.
I have examples of how I currently use this property, I use it on my new "Friends" Template (Responsive) and I prototyped the dropdown and accordian (non-responsive on the linked page )
I have also further developed the template (note to self - do not use the old template) - also above is an experiment in superscript and the Awesome icon library.
Analysis of the JavaScript for the Accordian
There is a difference between the Accordian and the Dropdown in that the accordian elements are originally hidden using w3-hide class. The dropdown elements are defined (I am presuming) deeper in the W3 Framework coding, but the function, below, looks pretty similar to that of the accordian.
There are a few things here that are not obvious, well at least to me! The function obviously changes the colour of the clicked accordian parent but it also controls the siblings and effectively "traverses" the node that contains the menu elements.
The JavaScript for the Sub-Menu
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x..className.replace(" w3-green", "");
}
}
The html for the menu:
The HTML for the Sub-Menu
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:160px;">
a href="friends_anomolies.html" class="w3-bar-item w3-button">Friends Experiments
<div class="w3-bar-item w3-button" onclick="myAccFunc()">
Accordion <i class="fa fa-caret-down"></i></div>
<div id="demoAcc" class="w3-hide w3-white w3-card-4">
<a href="friends_template.html#dropdown" class="w3-bar-item w3-button">Where I am using this</a>
<a href="friends_template.html#accJS" class="w3-bar-item w3-button">The Modified JS</a>
</div>
<div class="w3-dropdown-click">
<div class="w3-bar-item w3-button" onclick="myDropFunc()">
Dropdown <i class="fa fa-caret-down"></i>
</div>
<div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link
<a href="#" class="w3-bar-item w3-button">Link
</div>
</div>
.....................the test of the div .........................
The menu is a w3-bar-block of w3-buttons that are the accordian and dropdowns menu items and are hidden using w3-hide.
They are all siblings
The dropdown buttons are hidden by nature of that they are w3-dropdown-content class.
Responsive Design
The prototyping page is "not-responsive". By this I mean that it does not look good (or work well) on a mobile device. Well, it could look better.
As I say I have improved the design of the template. - use third_subpage.html for new pages.
Update - 2022
I have further improved the template (I think) - Fourth Template.
This template adds sticky buttons for navigation, places CSS and Javascipts in linked files and fixes some of the
W3 Container spacing and mobile menu.
Traversing a Document Node
I may well be still way out of my depth here, but the function that controls the accordian and the dropdown in this exampls appears to "traverse" the DOM elements that are in that "Node". In this case they are the menu items that are hidden and when the parent is clicked, show.
My first instinct, and what I think I observed when I was looking at the accordian before, was to add some type of loop construct in the JavaScript - see my previous explanation. In the non-framework version an eventListener is added to the elements of the accordian using a loop. However, the implementation of that accordian is totally different as in that case the sections of text headed by the accordian elements are hidden and after the eventListener is added they will expand when clicked forcing the content on the page down.
The html for the menu shows the structure of buttons, Both the accodian and the dropdown are divs containing w3‑buttons. When the button with the id="demoAcc" or id="demodrop" is clicked the function in the JavaScript un-hides all siblings in the div.