based on Master => Detail relations of mysql fields in a database:
Company – Program – Level
- Adobe – Photoshop – Beginner
- Adobe – Photoshop – Advanced
- Adobe – Illustrator – ….
- ….
- Microsoft – Word – Beginner
- ….
- Microsoft – Excel – ….
I am struggling with the multi-level – layouts, also called nested , in HTML5 only without JavaScript.
I want to use an sql String with “Select field1,field2,field3” to display the contents like in a windows-Explorer style.
Perhaps there is a tutorial / Excample out there? so far I have not found a multi-level php script using HTML 5 only without the use of JavaScript!
Advertisement
Answer
A HTML 5 Solution with and
<style> details { padding: 1px; background-color: #f6f7f8; margin-bottom: 1px; } details[open] { /* the style goes here */ } summary { cursor: pointer; } .level_0 { margin-left: 1em; padding-left: 1em; color:red; } .level_1 { margin-left: 2em; padding-left: 1em; color:green; } .level_2 { margin-left: 3em; padding-left: 1em; color:blue; } .level_3 { margin-left: 4em; padding-left: 1em; color:gray; } </style> <h4> <details open> <summary class='level_0'>Microsoft</summary> <details> <summary class='level_1'>Word</summary> <details> <summary class='level_2'>Basic</summary> <ul class='level_3'> <li>Module 1</li> <li>Module 2 </ul> </details> <details> <summary class='level_2'>Advanced</summary> <ul class='level_3'> <li>Module 3</li> <li>Module 4 </ul> </details> </details> <details> <summary class='level_1'>Excel</summary> <details> <summary class='level_2'>Basic</summary> <ul class='level_3'> <li>Module 5</li> <li>Module 6 </ul> </details> </details> </details> <details open'> <summary class='level_0'>Adobe</summary> <details> <summary class='level_1'>Photoshop</summary> <details> <summary class='level_2'>Basic</summary> <ul class='level_3'> <li>Module 7</li> <li>Module 8 </ul> </details> <details> <summary class='level_2'>Advanced</summary> <ul class='level_3'> <li>Module 9</li> <li>Module 10 </ul> </details> </details> <details> <summary class='level_1'>Illustrator</summary> <details> <summary class='level_1'>Basic</summary> <ul class='level_3'> <li>Module 11</li> <li>Module 12 </ul> </details> </details> </details>