Bonjour,
Je suis débutante et m'exerce sur la création d'un menu "accordéon" vertical.
Je me suis pas mal dépatouillé jusque-là (je pense).
Le hic est au niveau de mon script, je ne parviens pas à changer le "+" en "-" lorsque je déplie un "Contenu".
Si quelqu'un peut m'éclairer , je suis toute ouïe
. !
Merci par avance et bon dimanche !
Je suis débutante et m'exerce sur la création d'un menu "accordéon" vertical.
Je me suis pas mal dépatouillé jusque-là (je pense).
Le hic est au niveau de mon script, je ne parviens pas à changer le "+" en "-" lorsque je déplie un "Contenu".
Si quelqu'un peut m'éclairer , je suis toute ouïe
. !Merci par avance et bon dimanche !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice09</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="content">
<ul id="menu">
<li>
<div class="accordeon">
<h2>Contenu 1</h2> <span>+</span>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
</li>
<li>
<div class="accordeon">
<h2>Contenu 2</h2> <span>+</span>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
</li>
<li>
<div class="accordeon">
<h2>Contenu 1</h2> <span>+</span>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum labore quos in mollitia praesentium, recusandae alias voluptatibus ratione dolorum laudantium maiores! Atque eligendi velit libero veniam ut dolor ullam at obcaecati ipsa labore. Magnam voluptatum excepturi et corporis, nobis fuga enim sint repellendus! Maxime fugit tenetur, error reiciendis sit dolorum ullam alias aperiam debitis ipsa, qui quas at, consequatur quos sapiente odio nobis rerum. Quae, dolores ut! Quibusdam blanditiis odit quod quidem maxime commodi libero quis dicta ratione, reiciendis maiores ullam fugit laborum! Eveniet tenetur, fugit dicta aspernatur harum maxime nulla laudantium asperiores unde, consequatur excepturi!</p>
</li>
</ul>
</div>
</body>
</html>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f1f1f1;
display: flex;
min-height: 100%;
align-items: center;
justify-content: center;
}
#content{
max-width: 400px;
padding: 20px;
}
#menu{
width: 400px;
}
#menu >li{
width: 100%;
border-bottom: 2px solid blueviolet;
padding: 10px 0;
list-style: none;
}
.accordeon{
padding: 5px 6px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
#menu li h2{
font:italic bold 20px "times new roman", serif;
}
#menu li p{
font: 11px "calibri", sans-serif;
padding: 0 6px;
display: none;
}
#menu li span{
width: 28px;
height: 28px;
text-align: center;
font-size: 1.5em;
font-weight: 700;
line-height: 30px;
}$(document).ready(function() {
$('#menu > li').click(function() {
var signe=$(this).children('span');
$('#menu > li > p').slideUp();
$('#menu > li > .accordeon >span').text('+');
if(!($(this).hasClass('active'))){
$('#menu > li>').removeClass('active');
$("p", this).slideToggle();
$(this).addClass('active');
signe.text("-")
}else{
$(this).toggleClass('active');
}
});
});