Bonjour,
Voila je rencontre un petit problème avec mon code.
Ce que je fais
Décrivez ici votre code ou ce que vous cherchez à faire
slide toggle marche parfaitement
j'aimerai changer le texte du label en agrandir et réduire
avec ceci
mon code
<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="test">
<p>I am some hidden text</p>
</div>le css
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
background: #336600;
color: #FFF;
font-family: arial;
-webkit-transition: background-color 0.1s, color 0.1s;
}
label:hover {
background: #33CC00;
color: #000;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: red;
margin-top: 10px;
min-height: 260px;
width: auto;
}
input:checked + .test {
height: auto;
}
Css pour changer le nom du label
#check:checked + label:after {
content:"Réduire"
}
#check + label:after {
content:"Agrandir"
}
et mon label dans mon code est vide
<label for="check"></label>Ce que je veux
Je cherche a pouvoir utiliser le slide toggle en css et pouvoir changer de nom quand il est :checked
Ce que j'obtiens
j'obtiens le changement de nom mais mon toggle ne fonctionne plus
J'ai déja un toggle avec une fonction mais je cherche a le remplacer car le slide toggle est plus joli en css
9 réponses
Tu peut par exemple sélectionner l'ensemble des div ou autres qui porterait l'attribut data-togglediv tu parcours ensuite un le tableau de tes élements et pour chacun tu lance la fonction qui va leur greffer l'évennement au clic !
Dans ton code CSS tu sélectionnes ton label qui est après ton input. Mais dans ton HTML c'est l'inverse. Si tu inverses les 2, ça fonctionne
<blockquote>Dans ton code CSS tu sélectionnes ton label qui est après ton input. Mais dans ton HTML c'est l'inverse. Si tu inverses les 2, ça fonctionne</blockquote>
Il reste parfois qu'il est plus simple de gérer tout ça en JS
@BaBeulouloa
<input id="check" type="checkbox">
<label for="check"></label>Fonctionne pour le changement de nom mais n'active plus le toggle
@JeremieMeunier
Oui plus simple et pas très beau à regarder
sur ma page j'ai déja en java dessus mais je fais des test pour css qui est plus joli quandil fais son animaton.
Avec le java , j'ai une fonction + ou -
$(function(){
$('.lien-dynamisme-gauche').click(function(){
$(this).parent().parent().next().slideToggle("slow");
if($(this).html() == "-"){
$(this).html('+');
}
else{
$(this).html('-');
}
});
});
Mais le résultat est horrible, tu vois glisser toutes les divs puis cela fais le hidden. De même quand tu agrandis.
Voilà le screen
@Benjamin Derepas, oui je vais tester avec ::target du moins si mon code ne passe pas juste que je vais devoir mettre before et after
j ai try avec target mais je pense que je m'y perd avec se selecteur du moins il ne fais passe que je désire.Si quelqu'un à la solution se serait cool sinon bas je vais laisser cette transition java toute pourrie et passer a autre chose.
Pour clore se topic, donc pour régler le problème je suis passé en script jquery
$(document).ready (function(){
$("#achangerConnecte").click(function () {
$(this).text(function(i, v){
return v === 'Réduire' ? 'Agrandir' : 'Réduire'
})
}),
$("#achangerNonConnecte").click(function () {
$(this).text(function(i, v){
return v === 'Réduire' ? 'Agrandir' : 'Réduire'
})
}),
$("#achangerConnecte").toggle(function(){
$(".changeConnecte").css("height", "auto");
},
function(){
$(".changeConnecte").css("height", "240px");
});
$("#achangerNonConnecte").toggle(function(){
$(".changeNonConnecte").css("height", "auto");
},
function(){
$(".changeNonConnecte").css("height", "240px");
});
}) juste une question vite fais sur mon script la jai deux div (connecter et non connecter) sur la meme page, actuellement cela fonctionne très bien. Mais est il possible de changer la fonction pour réduire les lignes car j'avais juste la fonction #achanger que j insérais dans mes deux div et cela ne fonctionnait pas donc j ai du faire deux fonction peux être ai-je mal écrit, mais rien de tels quand c'est plus propre :)
@abbaKrakus
Je comprend pas ton message ( sur le bien)
SInon @JeremieMeunier, j'ai pas encore tester comme je dois avancer sur mon site. Mais j'ai vite regarder et tu donnes la bonne marche a suivre.