Accordion with symbols
The Accordian element on a webpage is one that is constructed by reasonably complex coding. This page is an attempt to show how I initially investigated its use for this website.
Having got the W3C example to work on this site and implementing it on one of my pages I decided that that implementation was more confusing than it was of help. What I was initially trying to do was to emulate what I was seeing on Wikipedi's pages where the visitor could expand sections by clicking on a header for that sub-topic. This works well for the "sophisitated" visitor, but visitors to this website are not at the level of an advanced Wikipedia user.
Since authoring this page Wikipedia seem to have replaced the expandable sections by Hoverboxes.
The code used to process the accordian can be seen here.
I also took another look at the original accordian code before I started to look at the W3.css Accordian. While this may seem a little confusing I do use BOTH techniques on my pages. The template menus use the W3.css code and the accordian I tried to use for page formatting uses the non-W3.css code.
Original page
I have changed the format of this page and these notes are not necassarily related to what you see here.
The code for this page was copied from the W3C Schools website. The original template for the page was the Master Responsive Menu Design - I have changed it to my current template
The CSS for the accordion places a minus sign after the "active" menu item. This is solved by adding button in front of .active:after
In this page the css code for the expandable sections is contained on the page itself. In other examples, the site map is an instance, the css was moved to an external css file. In addition I also created a Javascript function that expands the sections and placed it in the script.js file. However, on further analysis I feel that I was adding too many event handlers to the operation of the expandable sections. I need to review this code in more detail. The use of addEventListener was possibly not implemented correctly here.
I have also changed some of the timings on the highlighting and expansion of the sections.
Accordion with symbols
In this example a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.
Having had some success in adding content for my History Project Iam finding that I still need a way of displaying the time-line for the Medieval Period of Belchamp Walter's history.
The advantage of this type of presentation is that you can get a lot of information on a page that is not immediately seen by the visitor. The section has to be expanded. However, this is not without problems as many visitors will be un familar with the technique and unless they are repeat visitors that know how the site and pages work are likely to move on a miss the information that will be hidden unless the section is expanded.
I am using this page and this example to test a few things out before I commit to structuring a new page for the history project. I have accordian techniques used in my menu system for my current template design but that uses the W3C CSS library. This accoridian does not and as such I will have more control on how I configure it - Well, that is the theory!
I can experiment with both.
John Helion and Thomas Montgomery didn't have "Project boxws". They also need work with dates.
I need to experiment here with a few things before I try to adopt it for the History Pages.
One of the problems is that if a visitor goes to a page on a particular family, Botetourt for example, tbe section (like this one) will be collapsed when the page-back is pressed.
I did start some more experiments with this accordian with a view to adapting it to a Site Map technique
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
The code for adding event handlers to the accordian elements
Using the W3C.css framework I will document the code here.
Basically the accordian is a "styled" button.
The CSScode for the Accordian
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 3.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\02795';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.active:after {
content: "\2796";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 2s ease-out;
}
/style>
Analysis of code
The template is the "new layout" - see wp_tf.html
The css files are rh.css and fbm.css (I think that I have combined these in the css for my new layout)
The JavaScript functions have been copied to script.js but this page has the original scripts on the page.
Background to this page
This page represents a "transitional" example of my page design process. I have changed this conciderably since I originally wrote this page. The original page was using an old design and I have left the notes above.