[Résolu] Menu déroulant (Créer un compte)

Encore plus simple:

<script>
$=jQuery;
$('.collapse.show').hide();
$('.nav-link').click(function(){$('.collapse.show').show()});
</script>

• Cette réponse a été modifiée le il y a 8 mois par ferman.

Bonjour,

Je ne suis pas sûr de comprendre.

Avant d’avoir mis le code quand vous arriviez sur la page recrutements c’était toujours le menu « Andrézieux-Boutheon » qui était ouvert, jamais un autre.

Avec le code, en arrivant sur la page, ce menu (ainsi que tous les autres) est fermé et il faut cliquer pour ouvrir un menu. Quand vous quittez la page, elle est réinitialisée et en y revenant vous retrouverez tous les menus fermés. La seule exception est quand vous revenez avec la flèche « page précédente » dans la barre du navigateur mais là je pense qu’on ne peut rien y faire. Pourriez-vous me re-préciser ce que vous souhaitez?

Bonjour,

Je souhaiterais que ces menus restent fermés dès l’instant où je sélectionne l’un d’entre eux,

C’est possible mais pouvez-vous temporairement désactiver le code que je vous avais donné pour que je puisse tester sans qu’il interfère?

Bonjour,

Voici une solution possible. On peut faire des ajustements mineurs en CSS (couleurs, taille des caractères…)  mais pas changer fondamentalement le comportement du tableau d’offres d’emploi.

Il y a deux codes:

• Un code jQuery à mettre en place de manière analogue au précédent
• Un code CSS à mettre dans les CSS personnalisées du thème.

<script>
$=jQuery;
$('.collapse.show').show();
$('.collapse.show,.collapsed').addClass('details');
$('[id*="collapse_header_0"]').css({"pointer-events":"none"});
$('.card-body').hide();
$('.collapse.show').click(function(){$('.card-body').show();
	$('.collapse.show,.collapsed').removeClass('details');
	$('[id*="collapse_header_0"]').css({"pointer-events":"auto"});
});
</script>

.details:after{
	font-size:14px;
	content:"Double cliquez ici pour voir le détail des offres";
	color:red;
	border:solid red;
	padding:5px;
	position:relative;
	top:-7em;
}
.collapsing{display:none;
}
.collapsed.details{pointer-events:none;
}
@media only screen and (max-width: 800px) {
.details:after{
	top:-6em;
  }
}

Il est possible de regrouper ces deux fonctions en une seule fonction PHP

A l’ouverture de la page on voit ce qui est en pj. On peut naviguer entre les villes et parcourir les titres des offres mais on ne peut pas les ouvrir. Si une/plusieurs offres sont intéressantes, Il est possible d’en voir le détail en double-cliquant sur un champ , ce qui a pour effet de rendre possible l’ouverture de toutes les offres.

On peut éventuellement faire des ajustements « cosmétiques »en CSS (couleurs, taille des caractères…)  mais pas changer fondamentalement le comportement du tableau d’offres d’emploi.

Enfin, il y aurait peut être une solution beaucoup plus simple mais je ne peux pas la tester (mais vous pouvez) qui serait de mettre en premier (à la place de « Electricien maintenance H/F « ) un champ vide. Je ne sais pas si c’est possible  (je pense que oui) et dans ce cas vous n’auriez besoin d’aucun code.

Tenez moi au courant.

• Cette réponse a été modifiée le il y a 7 mois et 3 semaines par ferman.

Bonjour,

Bonjour,

C’est bizarre.  Je viens de re-essayer et ça marche sauf que j’ai fait une petite erreur dans le code jQuery que je vous ai donné: le double click était une   amélioration de dernière minute (pour bien différencier des autres champs cliquables) mais j’ai oublié de modifier dans le code que je vous ai transmis (il faut simplement remplacer (‘.collapse.show’).click(function()… par (‘.collapse.show’).dblclick(function()…). Donc chez moi ça marche mais il suffit de cliquer une fois.

D’un autre côté, puisque vous êtes parti sur autre chose et que la méthode avec un champ vide fonctionne, c’est plus simple. Vous dites que ce n’est pas joli mais en CSS on peut faire beaucoup de choses. Et je pense que vous pouvez facilement ajouter un texte dans le html (ou en CSS) Ex en pj. On peut regarder ça si vous voulez .