Bonjour à tous.

Je suis actuellement en train de bosser sur un petit projet perso et je me retrouve face à un obstacle.

Je fait un listing de fichiers/dossiers dans un repertoire particulier, et je souhaiterai, comme dans une arborescence logiciel quelconque, pouvoir afficher ou cacher les éléments d'un répertoire (via un bouton "+", ou "-").

Le problème c'est que je ne sait pas comment faire pour que, lorsque je clique sur mon bouton "+", les fichiers apparaissent ET que le bouton "+" devienne un bouton "-" et que lorsque je clique dessus, les éléments disparaissent et ainsi de suite.

Voici le boût de code qui correspond au bloc du dossier et de ses sous fichiers :

<?php
/*début de la fonction listing()*/

/*...*/

if(is_dir($file)) //Si c'est un dossier
{
    echo "<img src=\"images/folder.png\" /><span class=\"dir\">" . $file . "</span><br />"; //On met une image de dossier
    echo "<div id=\"sous_rep\"><a href=\"\"><img src=\"images/plusless.png\" class=\"plus\" /></a><br />"; //On crée un bloc
    listing($file); //On réapelle la fonction pour qu'elle parcoure les fichiers et sous-dossiers de ce dossier (et ainsi de suite) grâce à la récursivité.
    echo "</div>"; //On ferme le bloc
}

/*...*/

/*... fin de la fonction listing()*/
?>

NB : la fonction listing() permet d'identifier les fichier (dossier ou fichier) du répertoire auquel elle est appelé.

PS: désolé si le code est un peu fait a la bourrin (le html dans les echo)

Pour faire cela, il faut utiliser Javascript.
Essaye de voir si un modérateur peut déplacer le topic là-bas .

Et si tu veux de l'aide pour le PHP, post en PHP.

Mais il faut effectivement mieux du Javascript. La voie que j'utiliserai serai de faire une fonction Javascript "afficheDossier" qui a 1 argument : quel sous-dossier afficher. N'oublie pas d'inclure dans la fonction un "this.src='imageMoins.png'". Enfin, tu fais une duxième fonction, mais inversée.

Voilà voilà ...

Oups pour la catégorie, me suis trompé ><.

Ok donc si je comprend bien, le JavaScript est indispensable...
Je vais demander de déplacer le sujet car je ne maitrise pas du tout ce language.

Merci

Bon, apparemment, ça a été migré.
Si quelqu'un a des idées du côté de JS, je me permet d'uP un peut .

Bonjour.

Un p'ti up pour la route.

PS: merci pour le deplacement de topic

Voilà le topic déplacé, tant mieux.

Je vais faire simple (ou presque) :

As-tu des bases Javascripts ?

J'ai fait du Js il y à quelques années, mais je m'en rapelle plus du tout.

J'ai trouvé un élément de réponse en surfant sur le web, mais l'effet n'est pas complet.

Voici le code :

<script type="text/javascript">
function deroul_div(object)
{
    if(document.getElementById("div_aff" ).className='aff_div')
    {
        document.getElementById("div_aff" ).className='cache_div'
    }
    else
    {
        document.getElementById("div_aff" ).className='aff_div'
    }
}
</script>

<img src="plus" id="click_div" onClick="deroul_div(this)">
<div class="cache_div" id="div_aff">texte à cacher</div>

.aff_div
{
    display:inline;
}

.cache_div
{
    display :none;
}

Le code fonctionne, mais je fait face à un petit probleme.

En effet, le div a afficher/cacher étant créer pars récursivité dans mon algo de listing des fichiers, le div à toujours le même id, et lorsque je clique sur un bouton "+"/"-", c'est toujours le premier div qui subit l'effet du script Js. Du coup, impossible d'enrouler/dérouler les autres div.

Je ne sais pas si j'ai été clair

ligne 4: if(document.getElementById("div_aff" ).className=='aff_div') // il faut mettre == pour comparer sinon c'est une affectation
et dans ton HTML ligne 1, il vaut mieux écrire onclick sans majuscule

Citation : headerguard

le div à toujours le même id

Là, t'as un problème de conception car un id doit être unique dans toute la page

sinon à la place tu peux sélectionner l'élément suivant avec this.nextSibling mais dans ce cas fait attention de ne pas avoir d'élément parasite entre tes éléments comme des sauts de lignes qui sont considérés comme des éléments par certains navigateurs (comme FF)

ok pour le ==.

Sinon, pour le id, il est fait automatiquement grâce a la récursivité. Je devrais donc plutôt mettre un class dans ce cas là ?

Ça dépend de ce que tu veux faire...
Un id sert à identifier un élément, c'est pour ça qu'il doit être unique pour pouvoir retrouver UN élément
Une class sert surtout à définir un style à ton élément, ainsi tous les éléments ayant la même class peuvent avoir la même charte graphique (ceci est fait avec le CSS)


Sinon pour ton code tu dois bien avoir un élément qui différencie la création d'une zone d'une autre. Il suffit d'utiliser cet élément pour créer un identifiant unique. Ou alors si vraiment ce n'est pas possible, tu peux incrémenter une variable unique à tous le programme ou générer un nombre aléatoire (en gardant en tête que parfois, si tu n'as vraiment pas de chance, tu pourrais retomber 2 fois sur le même nombre). Vu que tu génères tes 2 éléments (bouton et zone à afficher/cacher) en même temps tu connais alors à ce moment l'id utiliser pour la zone.
Attention, un id ne devrait pas commencer par un chiffre. Il te suffit alors d'ajouter une lettre devant ce nombre pour créer l'id.

Oui donc j'utiliserai un class étant donnée que tous mes bloc auront la même charte graphique, peut importe ce qu'il y à dedans (le seul style appliqué étant un margin-left et une image de fond...)