Discussion :

[hnn21]

Bonjour à tous,

Je m'adresse à vous car je peine un peu à réaliser ce que je souhaite sur une carte mapbox.

J'aimerai rendre le menu de la carte multichoix afin de sélectionner (ou désélectionner) plusieurs aliments.

Pour le premier lien du menu "tous", celui-ci ne serait pas multichoix, puisque lorsqu'on cliquerait dessus, la classe "active" serait enlevée du reste du menu, et inversement.

Si vous pouviez m'indiquer comment procéder d'après le code de la carte au lien suivant, j'en serai vraiment reconnaissant!

https://jsfiddle.net/hnn21/Lk6tszdu/

Merci!

[NoSmoking]

Bonjour,

J'aimerai rendre le menu de la carte multichoix afin de sélectionner...

passe par des <input type="checkbox">.

	Au passage une ID doit être UNIQUE

ce qui n'est pas le cas dans ton code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav class='menu-ui'>
  <a href='#' id="all" class="active"  data-filter='all'>Tous</a>
  <a href='#' id="reste" data-filter='Fruits et légumes'>Fruits et légumes</a>
  <a href='#' id="reste" data-filter='Œufs et produits à base de viande (saucisses, pâtés, etc.)'>Œufs et produits à base de viande (saucisses, pâtés, etc.)</a>
  <a href='#'  id="reste" data-filter='Huile et vinaigre'>Huile et vinaigre</a>
   <a href='#' id="reste" data-filter='Lait et produits laitiers'>Lait et produits laitiers</a>
  <a href='#' id="reste" data-filter='Fruits secs et graines'>Fruits secs et graines</a>
  <a href='#' id="reste" data-filter='Riz, pâtes, céréales, lentilles et autres légumineuses'>Riz, pâtes, céréales, lentilles et autres légumineuses</a>
   <a href='#' id="reste" data-filter='Thé, café et alcool'>Thé, café et alcool</a>
  <a href='#'  id="reste" data-filter='Chocolat'>Chocolat</a>
   <a href='#' id="reste" data-filter='Epices'>Epices</a>
  <a href='#' id="reste" data-filter='Farine et sucre'>Farine et sucre</a>
  <a href='#' id="reste" data-filter='Snacks et repas vendus à l’emporter'>Snacks et repas vendus à l’emporter</a>
  <a href='#' id="reste" data-filter='Cosmétiques et produits de nettoyage'>Cosmétiques et produits de nettoyage</a>
 
</nav>