0
salut Je suis en train de créer un bouton où cacher/afficher le contenu lorsque je clique dessus, mais quand j'applique certains styles au contenu, il ne se cache plus, je suppose qu'il a quelque chose à voir avec la position css , mais ne peut pas comprendre pourquoi, quelqu'un pourrait m'aider s'il vous plaît? merci à l'avancebouton accordéon texte non caché
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}button.accordion {
background-color: #13294b;
border: 2px solid #59cbe8;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #1f447b;
}
button.accordion:after {
content: '\002B';
color: #59cbe8;
font-weight: bold;
float: right;
}
button.accordion.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.action1 {
position: absolute;
margin-top: -115px;
margin-left: 35px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
.action2 {
position: absolute;
margin-top: -115px;
margin-left: 175px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}<button class="accordion">This is the button</button>
<div class="panel">
<p><img width="650" height="114" style="border: 0px solid rgb(0, 0, 0); border-image: none;" src="./?a=654193" /><br /></p>
<p class="action1">Recognise</p>
<p class="action2">Remove from play</p>
</div>
ajoutez 'position: relative' à' .panel' - c'est ce que vous cherchez? –
parfait, cela résout le problème !, merci beaucoup! – nsic