Atelier Graphique et Web: Slide jquery avec bouton

Comment récupérer l'id 'un bouton au clic et d'afficher son contenu avec slide ?

Tout d'abord il vous faut commencer par le html.

On peut utiliser des <button> à la place des div.

CODE HTML :
<!doctype html>


 <html lang="fr" class="no-js"> 
<head>
    <meta charset="utf-8" />
    <title>Afficher les résultats d'une checkbox avec jQuery</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="css/style.css" />
    <script>
        document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
    </script>
</head>

<body role="document">
    
<div class="container">

<div class="btn" id="0"><p>bouton 1</p></div>
<div class="contenu-hidden" id="btn0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue velit lacinia justo hendrerit finibus. Mauris elementum odio a gravida pellentesque. Cras ipsum metus, eleifend maximus dui eu, sodales suscipit augue. Integer non nisi condimentum elit ultrices faucibus. Nam mollis tellus sit amet tortor finibus rutrum. In non rutrum lorem, tristique luctus nibh. Pellentesque interdum eget lacus id tempus. Donec sodales finibus molestie.
</p>
</div>

<div class="btn" id="1"><p>bouton 2</p></div>
<div class="contenu-hidden" id="btn1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue velit lacinia justo hendrerit finibus. Mauris elementum odio a gravida pellentesque. Cras ipsum metus, eleifend maximus dui eu, sodales suscipit augue. Integer non nisi condimentum elit ultrices faucibus. Nam mollis tellus sit amet tortor finibus rutrum. In non rutrum lorem, tristique luctus nibh. Pellentesque interdum eget lacus id tempus. Donec sodales finibus molestie.
</p>
</div>

<div class="btn" id="3"><p>bouton 3</p></div>
<div class="contenu-hidden" id="btn3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue velit lacinia justo hendrerit finibus. Mauris elementum odio a gravida pellentesque. Cras ipsum metus, eleifend maximus dui eu, sodales suscipit augue. Integer non nisi condimentum elit ultrices faucibus. Nam mollis tellus sit amet tortor finibus rutrum. In non rutrum lorem, tristique luctus nibh. Pellentesque interdum eget lacus id tempus. Donec sodales finibus molestie.
</p>
</div>

</div>


    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>

CODE CSS

.container{
width:600px;
padding:10px;
}

.btn{
background:#EC407A;
padding:2px;
text-align:center;
border:2px solid pink;
}
.btn:hover{
cursor:pointer;
background:#ddd;
   color:#EC407A;
}
.btn p:hover{
   color:#EC407A;
}
.btn p{
font-size:15px;
text-transform:uppercase;
color:#fff;
}
.contenu-hidden{
background:#E1BEE7;
padding:10px;
}

CODE JQUERY

$(".contenu-hidden").hide();

$(".btn").on("click", function(){
    for(i=0; i<=10; i++){
       var id = $(this).attr('id');
    var i;
         $("#btn" + id[i]).slideToggle("slow");
    }
});

Rechercher dans ce blog

Slide jquery avec bouton

Modernizr