Refermer un onglet en cliquant

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Refermer un onglet en cliquant

Message par Melodiam Mer 2 Jan 2019 - 20:48

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 ! Very Happy

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 !!!!


Dernière édition par Melodiam le Sam 5 Jan 2019 - 7:08, édité 1 fois
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Refermer un onglet en cliquant

Message par Melodiam Ven 4 Jan 2019 - 12:34

Quelqu'un saurait ? Smile
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Refermer un onglet en cliquant

Message par Lixyr Ven 4 Jan 2019 - 22:27

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">


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Refermer un onglet en cliquant 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Refermer un onglet en cliquant 3592387030 pour prévenir la modération.

Refermer un onglet en cliquant Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6947
Inscrit(e) le : 22/07/2010

Voir le profil de l'utilisateur https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Refermer un onglet en cliquant

Message par Melodiam Sam 5 Jan 2019 - 7:08

Bonjour !

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

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum