Afficher / Cacher des DIV (Version 2)

Daemon
Javascript

Bonsoir à tous.

Suite à la modification du code pour son amélioration,mon principe d'afficher et cacher mes divs ne fonctionne plus.

Le principe ici est qu'une seul DIV ne peut être visible à la fois.

Voici mes codes:

Fichier index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Titre de la page -->
        <title>Test</title>

    <!-- Codage de la page en utf-8 -->
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <!-- Langue de la page -->
        <meta http-equiv="Content-Language" content="fr-FR"/>
    <!-- Inclure le CSS dans la page html -->   
        <link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>
    <!-- Inclure le Code Java jquery dans la page html -->  
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<!-- Permet le hide / show des réalisations -->
    <script type="text/javascript">
    $(document).ready(function() 
        {
          $(".hide").hide();
          $(".lienvisible").click(function() 
            {
             $(this).nextAll('.hide').eq(0).slideToggle('slow')
            .siblings('.hide:visible').slideUp('slow');
            });
        });

    </script>

</head>
<body>
<p>------------------------------------------</p>
<?php 
function include_all_php($folder){
    foreach (glob("{$folder}/*.php") as $filename)
    {
        include $filename;
    }
}
include_all_php("projetsA");
?>
<p>------------------------------------------</p>
</body>
</html>

Dans le répertoire projetsA, j'ai plusieurs fichiers php dont voici un exemple: 

<div>
<h1 class="lienvisible"> Title 1 </h1>
<div class="hide">
<p> 
Test projet 1A
</p> 
</div>
</div>

Le principe est quand on clique sur un h1, il fait apparaitre la 1er DIV suivante ayant une classe Hide.

Dans la modification de code, la ligne avec siblings ne fonctionne plus car ce n'est plus un frère ni un parent.

Je dois trouver le bout de code qui permet de cibler les autres DIV.

Je ne sais pas si je suis sufisament claire...

4 réponses

Daemon
Auteur
Réponse acceptée

Bonjour à tous,

Le problème est résolu.

Voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <!-- Titre de la page -->
        <title>Test</title>

    <!-- Codage de la page en utf-8 -->
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <!-- Langue de la page -->
        <meta http-equiv="Content-Language" content="fr-FR"/>

    <!-- Inclure le CSS dans la page html -->   
        <link rel="stylesheet" media="screen" type="text/css" href="css/style.css"/>

    <!-- Inclure le Code Java jquery dans la page html -->  
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<!-- Permet le hide / show des réalisations -->

    <script type="text/javascript">

    $(document).ready(function() 
    {
        $(".hide").hide();
        $( ".lienvisible" ).on( "click", function()
            {
            var jObj = $( this ).nextAll( '.hide' ).eq( 0 );

            $( ".hide" ).not( jObj ).slideUp( "slow" );
            jObj.slideToggle( 'slow' );
            });
    }); 

    </script>

</head>

<body>

<p>------------------------------------------</p>

<div class="projet">

    <div>

        <h1 class="lienvisible"> Title 1 </h1>

        <div class="hide">
            <p> 
                Test projet 1A
            </p> 
        </div>

    </div>

    <div>

        <h1 class="lienvisible"> Title 2 </h1>

        <div class="hide">
            <p> 
                Test projet 2A
            </p> 
        </div>

    </div>

    <div>

        <h1 class="lienvisible"> Title 3 </h1>

        <div class="hide">
            <p> 
                Test projet 3A
            </p> 
        </div>

    </div>

</div>  

<p>------------------------------------------</p>

</body>

</html>
Maenhyr

Salut,
voici comment tu peux résoudre ton soucis : http://jsfiddle.net/prbaron/zkMfP/.

Maenhyr

Pourquoi fais tu un nextAll pour chercher la div .hide suivante ? jQuery te donne la possibilité de la trouver directement, ça permet de gagner en puissance de calcul.

Daemon
Auteur

Bonjour prbaron,

En fait je fais un nextAll( '.hide' ).eq( 0 ); parce que dan mon code original, j'ai plusieurs divs qui reste apparente entre le titre et la div cachée c'est pourquoi je recherche la 1er div avec la class hide.

Mais je suis ouvert à toutes amélioration de code. ;)