Modifier un système de sélection

Bonjour
je souhaite modifier le système de recherche avancée de mon site. Actuellement, lorsque l'on doit faire une recherche dans une catégorie on clic donc sur la catégorie une liste sous forme de select/option apparaît.
http://img11.hostingpics.net/pics/914633Capturede769cran20151116a768095356.png
http://img11.hostingpics.net/pics/912320Capturede769cran20151116a768095632.png

Je souhaite modifier ce système de façon à ce que lorsque l'on clique sur le lien « toutes les catégories » celle-ci ne sont plus affichées sous forme de liste mais sous liste de blocs avec toggle  (voir ci-dessous)

http://img11.hostingpics.net/pics/422336Inbox.png

j'ai commencé un peu à travailler dessus et j'ai réussi à créer la partie toggle. La ou je bute c’est d'afficher la catégorie en fonction du clic que l'on a fait. Je ne sais pas si j'ai été assez clair.

Voici ci-dessous ma function originale ainsi que celle que j'ai modifiée

Function original :

function display_search_categories($id, $categories)
{
	global $language;

	echo '<select id="opt" name="cat" class="select_recherche" onchange="GetOptions()">';
	echo '<option value="0">'. $language['select_categories'] .'</option>';
	
	foreach($categories as $row)
	{	
		$id_cat = (int) $row['id_cat'];
		$par_cat = (int) $row['par_cat'];
		$name_cat = stripslashes(htmlspecialchars($row['nom_cat'], ENT_QUOTES));		
       
		if($par_cat == 0) 
		{
			if(!empty($id) && $id == $name_cat)
			echo '<option value="'. $name_cat .'" class="fond_select_categories uppercase" selected="selected">- ' .$name_cat .' -</option>';
			
			else echo '<option value="'. $name_cat .'" class="fond_select_categories uppercase">- ' .$name_cat .' -</option>';
		}
		
		//Sous catégories
		
		$sous_categories = $categories;
		
		foreach($sous_categories as $row)
		{
			$id_sous_cat = (int) $row['id_cat'];
			$par_sous_cat = (int) $row['par_cat'];
			$name_sous_cat = stripslashes(htmlspecialchars($row['nom_cat'], ENT_QUOTES));
			
			if($par_sous_cat == $id_cat) 
			{
				if($id_sous_cat == $id)
				echo '<option value="'. $id_sous_cat .'" selected="selected">'. $name_sous_cat .'</option>';
				
				else echo '<option value="'. $id_sous_cat .'">'. $name_sous_cat .'</option>';
			}
		}
	}	
	echo '</select>';
}

Ma modification :

function display_search_categories($id, $categories)
{
	global $language;
	echo '<div id="catcherch" onchange="GetOptions()">'. $language['select_categories'] .'</div>';
	echo '<div id="catsearchb"><ul style="float:left" class="select_recherche">';
	
	
	foreach($categories as $row)
	{	
		$id_cat = (int) $row['id_cat'];
		$par_cat = (int) $row['par_cat'];
		$name_cat = stripslashes(htmlspecialchars($row['nom_cat'], ENT_QUOTES));		
       
		if($par_cat == 0) 
		{
			if(!empty($id) && $id == $name_cat)
			echo '<li class="fond_select_categories uppercase" >- ' .$name_cat .' -</li>';
			
			else echo '<li class="fond_select_categories uppercase">- ' .$name_cat .' -</li>';
		}
		
		//Sous catégories
		
		$sous_categories = $categories;
		
		foreach($sous_categories as $row)
		{
			$id_sous_cat = (int) $row['id_cat'];
			$par_sous_cat = (int) $row['par_cat'];
			$name_sous_cat = stripslashes(htmlspecialchars($row['nom_cat'], ENT_QUOTES));
			
			if($par_sous_cat == $id_cat) 
			{
				if($id_sous_cat == $id)
				echo '<li data-category="'. $id_sous_cat .'">'. $name_sous_cat .'</li>';
				
				else echo '<li data-category="'. $id_sous_cat .'">'. $name_sous_cat .'</li>';
			}
		}

	}	
	echo '</ul></div>';
}

Modifié par stephane72 (16 Nov 2015 - 10:05)