<details> <summary> php code tutorial example: How to retrieve nested master => detail records per php and mysql

Question

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!

Answer 1

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>