Refermer un onglet en cliquant

[Melodiam]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://spideypoolatelier.forumactif.com/

Description du problème

Bonsoir et bonnnne annnnée !

Je n'arrive pas à me dépatouiller avec mon code de menu déroulant (à côté de la bannière)...
Lorsque je clique par exemple sur "Staff", le menu se déroule pas de problème mais lorsque je clique à nouveau sur Staff pour fermer l'onglet, cela ne marche pas... Faites l'expérience par vous-même. ^^

J'aimerais savoir ce que je dois ajouter ou modifier à mon code afin que cela marche ?

Voici le code CSS:

Code:

.awf-shipper-2-tabs {
  width: 500px; position: absolute; text-align: right; overflow: hidden;
  margin-top: 250px; margin-left: 160px;  z-index: 999;
}

.awf-shipper-2-tabs label {
  font-family: georgia; text-transform: uppercase;
  padding: 0px 20px; height: 30px;
  cursor: pointer; color: #808080;
  display: block; overflow: hidden;
  line-height: 30px; font-size: 13px;
  background: none;
  box-sizing: border-box; letter-spacing: 2px;
  margin: 0;
}

.awf-shipper-2-tabs input {
  display: none; }

.awf-shipper-2-tabs article {
  margin-top: -1px;overflow: hidden;height: 0px;
  transition: all 0.3s linear;
}

.awf-shipper-2-tabs article div {
  color: #000;line-height: 14px;font-size: 10px;
  padding: 5px 20px;text-align: justify;height: 100%;
  box-sizing: border-box; overflow: hidden;
}

.awf-shipper-2-tabs article div h4 {
  font-family: 'Montserrat', sans-serif;text-transform: uppercase;
  margin: 5px 0;text-align: right;border-bottom: 1px solid;
  padding-bottom: 2px;font-size: 10px;
}

.awf-shipper-2-tabs input:checked ~ article.tab {
  width: 600px; height: 312px; text-align: left;
  overflow: hidden; }



.awf-shipper-2-credit {
  position: absolute; bottom: -15px;
}

.awf-shipper-2-credit a {
  text-transform: uppercase;font-size: 8px;
  text-decoration: none !important;font-weight: 900;
  font-family: "Montserrat", sans-serif;letter-spacing: 1px;color: #ccc;
}

.awf-shipper-2-item {
  width: 450px;height: 130px;margin: auto;background-color: #dedede;display: flex;flex-wrap: wrap;
}

.awf-shipper-2-item h4 {
  font-family: 'Montserrat', sans-serif;text-transform: uppercase;
  padding: 0px 20px;height: 30px;color: #fff;width: 100%;
  line-height: 33px;font-size: 8px;background: #000;
  letter-spacing: 1px;font-weight: normal;margin: 0;box-sizing: border-box;
}

.awf-shipper-2-item div {
  color: #000;line-height: 14px;font-size: 10px;
  padding: 10px 20px;text-align: justify;height: 80px;overflow: auto;
  font-family: 'Arimo', sans-serif;flex: 1;
}


Merci !!!!

[Melodiam]

Quelqu'un saurait ?

[Lixyr]

Bonsoir,

Concrètement, sans JS, on ne peut pas. Le principe d'un input de type radio est d'avoir un choix à faire. Quand on clique sur un input, il est automatiquement statué sur "checked" (sélectionné), donc on ne peut pas désélectionner un bouton radio.

Pour aller jusqu'au bout de la démarche, donc désélectionner, il faudrait changer le type de l'input, pour le passer à checkbox.

Donc pour tous les

<input id="tab-X" name="shipper-dark" type="radio">

changez par

<input id="tab-X" name="shipper-dark" type="checkbox">

[Melodiam]

Bonjour !

Merci, vous m'avez été d'une grande aide, cela fonctionne à présent.