Member Avatar for Stefce

Hello, I have a multidimensional array i like to make every category to be clickable and to show its own sub-categories i have something like this... pls help to achieve this. 

function makeList(array $Array) {
                $Output = '<ul>';
                foreach($Array as $Key => $Value) {
                    $Output .= "<li><input type='submit' name='value[$Key]' value='$Key' />";

                    if(is_array($Value)) {
                        $Output .= makeList($Value);
                    } else {
                        $Output .= "<a name='$Value' href='#'>".$Value."</a>";
                    }
                    $Output .= '</li>';
                }
                $Output .= '</ul>';
                return $Output;
            }
            $categories = array(
                'cars' => array(
                    'BMW' => array(
                        'X1',
                        'X3',
                        'X5',
                        'X6'
                    ),
                    'AUDI' => array(
                        'A3',
                        'A6'
                    ),
                    'MERCEDES' => array(
                        'A Class' => array('Sedan', 'Coupe', 'Sport'),
                        'B Class'
                    )
                ),
                'moto' => array(
                    'SUZUKI',
                    'HONDA',
                    'YAMAHA'
                ),
                'phones' => array(
                    'SAMSUNG',
                    'LG',
                    'MOTOROLA'
                )
            );
            echo makeList($categories);
  • 2 Contributors
  • 5 Replies
  • 330 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by Stefce
Member Avatar for AndrisP

You can use http://www.w3schools.com/tags/tag_details.asp

<?php
function makeList(array $Array) {
    $Output = '<details>';
    foreach($Array as $Key => $Value) {
        if(is_array($Value)) {
            $Output .= '<summary>'.$Key.'</summary>';
            $Output .= makeList($Value);
        } else {
            $Output .= '<div><a name="'.$Value.'" href="#">'.$Value.'</a></div>';
        }
    }
    $Output .= '</details>';
    return $Output;
}
?>

but is'n't supported on IE

Edited by AndrisP
Member Avatar for AndrisP

better looks this

<?php
function makeList(array $Array, &$Output) {
    foreach($Array as $Key => $Value) {
        if(is_array($Value)) {
            $Output .= '<details>';
            $Output .= '<summary>'.$Key.'</summary>';
            $Output .= makeList($Value, $Output);
            $Output .= '</details>';
        } else {
            $Output .= '<div><a name="'.$Value.'" href="#">'.$Value.'</a></div>';
        }
    }
    return;
}
?>

add to style sheet padding

<!DOCTYPE html>
<head>
    <title>Categories</title>
    <style>
    details details { padding-left:30px; }
    </style>
</head>
<body>
<?php

makeList($categories, $Output);
echo $Output;

?>
</body>

is not mistake "details details { ... }" - root details witout padding but any contained <details> with "padding-left"

Edited by AndrisP
Member Avatar for Stefce

For some reason this code doesnt work on my PC

Member Avatar for AndrisP

What browser (version) do you use? And what DOCTYPE is declared in your HTML? Tag "details" is new in HTML5. It can be unsupported if your DOCTYPE declared older than HTML5.
W3C maintains that it is working on Firefox 48, but in reality I can see that it works only on the Chromium-based browsers. I tested on FireFox 48 (Linux and Windows) both not properly supported "details" tag. On the Opera, Chromium and Google Chrome clickable "details" working properly.

Edited by AndrisP
Member Avatar for Stefce

Oh im using Edge and Mozilla BTW my default browser is Chrome but on chrome i got a vierd error when i want to connect on localhost its sayin me `Your connection is not private

Attackers might be trying to steal your information from localhost (for example, passwords, messages, or credit cards). NET::ERR_CERT_AUTHORITY_INVALID`

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.