Forum : Afficher / cacher une DIV avec des flèches

Auteur

Réponse acceptée

Voilà, j'ai trouver mon bonheur.

Ci-dessous mes codes de principes fonctionnelles pour aider ceux qui auraient les mêmes questions:
Le code HTML:

<!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>

    <!-- Inclure le script qui permet de dérouler une DIV dans la page html -->     
<script type="text/javascript">
$(document).ready(function() {
  $('div.projet1:eq(0)> div').hide();
  $('div.projet1:eq(0)> h3').click(function() {
 $(this).next().slideToggle('fast');
  });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
  $('div.projet2:eq(0)> div').hide();
  $('div.projet2:eq(0)> h3').click(function() {
 $(this).next().slideToggle('fast');
  });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
  $('div.categorie:eq(0)> div').hide();
  $('div.categorie:eq(0)> h2').click(function() {
 $(this).next().slideToggle('fast');
  });
});
</script>   

</head>
<body>

    <div class="categorie">

    <h2>Catégorie 1</h3>    
        <div class="projet1">
          <h3>Title 1</h3>
          <div>Lorem...</div>
          <h3>Title 2</h3>
          <div>Ipsum...</div>
          <h3>Title 3</h3>       
          <div>Dolor...</div>        
        </div>

    <h2>Catégorie 2</h3>    
        <div class="projet2">
          <h3>Title 1</h3>
          <div>Lorem...</div>
          <h3>Title 2</h3>
          <div>Ipsum...</div>
          <h3>Title 3</h3>       
          <div>Dolor...</div>        
        </div>  
    </div>
</body>
</html>

http://www.learningjquery.com/2007/02/more-showing-more-hiding

duffJohn

Salut,
utilises le JS et le css.
Le paramètre display: none; display: block...
;)

Lotfi Berrahal

Bonjour daemon ,

Je rejoins ce que t'as dit duffJohn et au niveau du js utilise le slide toggle de jquery tu devrais avoir l'effet que tu désire.
Voici la doc. Bon courage et bonne lecture !

Daemon

Auteur

Yop,

Merci pour les réponses.

Je vais lire la doc ;)

Lotfi Berrahal

Tu devrais avoir quelque chose comme ça pour ton code :

$('#id_de_ton_titre_1').click(function(){
$('#id_du_texte_a_cacher_ou_pas').slideToggle(1000); //temps en milliseconde de ton animation si tu met 'slow' c'est 400 millisecondes 
})

Daemon

Auteur

Ok merci.

Je vais aussi essayer d'integrer avec la fonction toggleClass une flèche quand le titre est développé et une quand il ne l'est pas...

Je m'y attele.

;)

Xtr3me

Ou tu utilises les transitions css3 mais tu n'assureras pas une compatibilité parfaite avec IE dans ce cas.

Daemon

Auteur

Bonjour à tous,

J'ai testé le code et j'ai encore quelques questions.

Voici le code

Dans mon index.html:

<!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>

    <!-- Inclure le script qui permet de dérouler une DIV dans la page html -->     
    <script type="text/javascript">
    $(document).ready(function()
    {
        $("#categorie1").click(function()
        {
            $("#titre1").slideToggle(250);
        });
        $("#titre1").click(function()
        {
            $("#texte").slideToggle(250);
        });

    }); 
    </script>

</head>
<body>

            <ul id="navprojet">

            <li><a id="categorie1" href="#" class="">Catégorie 1</a></li>
            <li><a id="titre1" href="#" class="">Titre 1</a></li>       
            </ul>
            <div id="texte"> Ceci est un essai</div>                

</body>
</html>

Dans mon CSS:

/* Code définissant body */ 
body {
    background-color: white; /* Couleur de l'arrière plan */
    font-family: "century gothic"; 
}
/* Code définissant un conteneur libérant le flux dû au float*/ 
.cb {clear:both;}
/* Début Code définissant le style des liens des projets*/ 
ul#navprojet{
    text-align: left;
    list-style-type: none; /* Enlève les puces de la liste*/
    margin-left:-40px;  
}
ul#navprojet li a{
    font-size: 20px; 
    line-height: 42px; /* Distance entre les puces */
    color: black; 
    font-weight: normal; /* Type de texte bold, italic, etc.*/ 
    text-decoration:none; /* Enlève le surlignement des liens*/ 
}
ul#navprojet li a:hover{
    color:black;
}
ul#navprojet li a.active{
    color:black;
}
/* Fin Code définissant le style des liens des projets*/
#texte {
display: none;
}
#titre1 {
display: none;
}

Pour l'instant lorsque je clique sur catégorie 1, il fait apparaître le titre1.
Quand je clique sur le titre 1, il fait apparaître le texte.
Et inversemment.

Cependant j'aimerai quand je clique une deuxième fois sur catégoire 1, tous les "sous répertoire" se cache.
Hors pour l'instant c'est le titre 1 qui se cache.

Merci d'avance.

Daemon

Auteur

Ah oui, j'ai oublié d'indiquer.

Y-a-t-il moyen de "généraliser" le code car je vais avoir quelques catégories, titres et textes à définir?

Afficher / cacher une DIV avec des flèches

9 réponses