Masquer/Montrer une div avec animation css3 onclick

Bonjour,

je cherche en vain une solution à une animation toute simple. Masquer/montrer une div en display:none ou opacity:0 dans le css et l'animer avec le css. Mais cela au clic d'un bouton. Et bien sûr j'ai 5 div différentes avec leur propre bouton.

Je pense être au bon endroit, car je ne vois pas comment animer cela sans JS, sauf si vous me démontrez le contraire...

Voici mon code actuel (je limite à 3 div)

<div class="formule">
<img src="uneimage.jpg">

<section class="info-formule" id="info-#ID_ARTICLE">
    <h4>TITRE</h4>
    <span>TEXTE</span>
</section>

</div>
<a href="#" class="show">Voir +</a>
<a href="#" class="hide">pas voir +</a>
</div>

<div class="formule">
<img src="uneimage.jpg">

<section class="info-formule" id="info-#ID_ARTICLE">
    <h4>TITRE</h4>
    <span>TEXTE</span>
</section>

</div>
<a href="#" class="show">Voir +</a>
<a href="#" class="hide">pas voir +</a>
</div>

<div class="formule">
<img src="uneimage.jpg">

<section class="info-formule" id="info-#ID_ARTICLE">
    <h4>TITRE</h4>
    <span>TEXTE</span>
</section>

</div>
<a href="#" class="show">Voir +</a>
<a href="#" class="hide">pas voir +</a>
</div>

Je bloque là-dessus j'ai un peu honte !

merci pour vos retours.

Je ne suis pas un expert en CSS mais je pense que tu auras plus de chances avec les transitions plutôt que les animations. Si je comprends bien le principe des transitions CSS, elles s'appliqueront si tu ajoutes/enlève une classe à un élément. Dans cette optique, tout ce que tu aurais à faire en js, c'est ajouter/enlever alternativement une classe CSS.

exact, c'est un peu ce que j'ai expérimenté

<script type="text/javascript"> 

    $( "#info-#ID_ARTICLE" ).bind( 'click' , function(){
       
        $( "#info-#ID_ARTICLE" ).removeClass( "class_css_hover" );
        $( this ).addClass( "class_css_hover" );
    } );
        
</script>

Je cherche actuellement à récupérer le nombre donné par #ID_ARTICLE en évitant de l'inclure dans chaque boucle (c'est lourd). Ça marche bien mais c'est pas trop ce que je veux, à savoir un bouton à cliquer -> affichage de mon div.

Bonjour,

Ce que j'ai tendance à faire (mais je ne sais pas si c'est conseillé) c'est de donner un id au bouton et de donner un id à l'article qui comprend l'id du bouton.
Je m'explique par l'exemple :

<section id="info1-article"></section>
<a id="info1"></a>

De cette façon, j'attache le même eventListener sur tout mes boutons et la fonction va prendre l'id du boutton clique, rajouter "-article" et afficher l'article correspondant.
On peut également se servir des attributs data pour y stocker l'id de l'article a faire apparaitre : http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

Ensuite j'utilise la fonction toogle de l'API classList pour switcher de visible à caché sans m'embeter à checker (http://www.alsacreations.com/article/lire/1498-lapi-classlist.html).

Et enfin je n'ai qu'un seul bouton qui switch ON/OFF grace au toggle du coup je change le contenu du bouton au click (on peu aussi chancger un classe ce qui permet de faire une fleche vers le haut ou vers le bas selon l'état).

Donc avec un html comme ça :

<section id="info1-article">
    <h4>TITRE 1</h4>
    <span>TEXTE</span>
</section>
<a id="info1" class="togglearticle">Show</a>

<section id="info2-article">
    <h4>TITRE 2</h4>
    <span>TEXTE</span>
</section>
<a id="info2" class="togglearticle">Show</a>

et j'ai un js qui ressemble à peut pres à ça :

var buttons = document.getElementsByClassName("togglearticle")
var i;
for (i = 0; i < buttons.length; i++) {
    buttons[ i ].addEventListener("click", function(){
        var article = document.getElementById(this.id + "-article");
        article.classList.toggle('article-active');
        if(article.classList.contains('article-active')){
            this.innerHTML = "Hide";
        }else{
            this.innerHTML = "Show";
        }
    });
}

Le petit test à la volée sur fiddle qui va bien : http://fiddle.jshell.net/v8h6qkkw/

Bonne journée
Modifié par _laurent (13 Aug 2015 - 10:48)

salut,
c'est possible de le faire en CSS pure en passant par différentes techniques.
Par contre ton code n'est pas du tout clair et contient pas mal d'erreurs. Tu devrais essayer de corriger et de présenter quelque chose de plus clair (au passage un ID est unique).

Bonjour.
Au cas où vous n'auriez pas encore trouvé :

<!DOCTYPE html>
<html><body>
     <div class="formule">
          <img src="uneimage.jpg">
          <section class="info-formule" id="toto">
              <h4>TITRE</h4>
              <span>TEXTE</span>
          </section>
          <a href="#" onclick="toto.style.display='block';">SEE</a>
          <a href="#" onclick="toto.style.display='none';">HIDE</a>
     </div>
</body></html>

P.S : Attention il y a un tag </div> en trop dans chacun de vos 5 blocs...
Modifié par ht1cd (14 Aug 2015 - 10:59)

Hey merci ! Vous m'ouvrez des horizons )) Pour ma part, j'ai bidouillé avec du css pur et :target. Mais vos suggestions peuvent permettre d'améliorer encore le système. J'ai beaucoup aimé l'article de l'api Classlist.

@Zelalsan, en fait #ID_ARTICLE c'est une balise SPIP qui donne un n° unique à mes id.