skip to Main Content

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!

2

Answers


  1. Chosen as BEST ANSWER

    This is my answer how to create a combination of entries in a three arrays.

        <?php
    function combinations($arrays, $i = 0) {
        if (!isset($arrays[$i])) {
            return array();
        }
        if ($i == count($arrays) - 1) {
            return $arrays[$i];
        }
        // get combinations from subsequent arrays
        $tmp = combinations($arrays, $i + 1);
        $result = array();
        // concat each array from tmp with each element from $arrays[$i]
        foreach ($arrays[$i] as $v) {
            foreach ($tmp as $t) {
                $result[] = is_array($t) ? 
                    array_merge(array($v), $t) :
                    array($v, $t);
            }
        }
        return $result;
    }
    $arrCombi=combinations(
        array(
            array('Microsoft','Adobe','Softskills'), 
            array('Word','Excel','Photoshop','Homeoffice'), 
            array('Grundlagen','Expert')
            )
        );
    $line="";
    foreach ($arrCombi as $k => $v){
        $line .= "(".implode(" AND ",$v) . ")  OR n";
    }
    $line=substr($line, 0, -4);
    echo nl2br($line);
    echo"<hr><pre>";
    print_r(
        combinations(
            array(
                array('Microsoft','Adobe','Softskills'), 
                array('Word','Excel','Photoshop','Homeoffice'), 
                array('Grundlagen','Expert')
            )
        )
    );
    echo "</pre>";
    ?>
    

  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search