Hello,

J'aimerais savoir s'il est possible de modifier le comportement de :active

-> c'est à dire : par défaut on clique, et cela adopte les propriété définis en css. Losqu'on "déclique" on revient à l'état initial.

Moi, ce que j'aimerais, c'est que :active reste "enfoncé" lorsqu'on relâche la souris jusqu'à ce que l'on clique ailleurs. En fait un peu le comportement de :focus.

Mais malheureusement il ne s'applique pas à ma div, sur laquelle j'ai fais un effet de dépliage.

Je vous mets la partie qui me pose problème :

HTML :

	<div class='actu' id='actu'>
	<h3>Ouvrir</h3>
	<p>test1</p>
	<p>test2</p>
	<p>test3</p>
	<p>test4</p>
	</div>

CSS :

.actu{
	
    margin-top: 10px;
    max-height : 50px;
    border: 1px solid black;
    overflow: hidden;
    transition: all 0.4s
}
.actu:active {
    max-height: 100%;
}

Voilà si quelqu'un a une suggestion (je précise que j'aimerais rester en css et ne pas partir sur du JS si ce n'est pas fondamentalement indispensable^^)

Salut,

tu ne peux pas vraiment en CSS. il faut le faire avec javascript ou php ou autre.

C'est extrêmement simple en JS avec l'aide de Jquery.

Après, en CSS il y a moyen de le faire avec un input checkbox mais c'est plus de la bidouille, donc pas très propre.

Salut, merci pour ta réponse; oui effectivement en JS c'est beaucoup plus simple, mais je me suis mis un petit défi personnel ahah. Par contre tu dis que c'est faisable en php, je suis curieuse, par quel biais ?

Edit : ah bah en fait j'ai réussi, avec un tab index ça détecte le focus (j'aime bien réfléchir pendant 3h sans y arriver et dès qu'on pose la question ça vient xD)

du coup :

Html :

<div tabindex="0" class='actu' id='actu'>
	<h3>Ouvrir</h3>
	<p>test1</p>
	<p>test2</p>
	<p>test3</p>
	<p>test4</p>
	</div>		 

css :

.actu{
	
    margin-top: 10px;
    max-height : 50px;
    border: 1px solid black;
    overflow: hidden;
    transition: all 0.5s
}
.actu:focus {
    max-height: 100%;
}

-
Edité par Aelya 6 février 2020 à 11:10:35

Tu as tout ici :
https://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

Et juste en CSS et HTML :

<label for="ouvrir">Ouvrir</label>
<input id="ouvrir" type="checkbox">
<div class="actu">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
    <p>test4</p>
</div>

.actu{
     
     margin-top: 10px;
     max-height : 0;
     border: 1px solid black;
     overflow: hidden;
     transition: all 0.4s
 }
 input {
     display:none;
 }
 label {
     cursor:pointer
 }
 input:checked + .actu {
     max-height: 100%;
 }