Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Refermer un onglet en cliquant

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


ABSENTE LA SEMAINE - RÉPONDS AUX MP
Refermer un onglet en cliquant G2J0e
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6630
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


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