Help! ! Hover / click + .load en jquery

Bonjours à tous,

J'essaye j'ai en partie 2 script jQuery pour faire deux action mais je pense qu'il serai plus simple de les rassembler et a la limite changer un peu ma structure html.

Mon process:
1. J'ai plusieurs "Li", lorsque qu'on survole un li, une image preview s'affiche dans container
2.Lorsque qu'on clique sur un Li on charge une page html (.load) dans ce container
3. Lors du nouveau clique pour fermer, le page html se ferme l'image du hover revient.

J'ai fait un gif de ce que ca donne ici:

https://giphy.com/gifs/projet-web-26DMW3FEWpsgYIEXS
Le code:

//------------------------------------------
// SYSTEM HOVER WORK - PREVIEW

$("#work #linkwork").hover(function(){

	var valeurFiltre = $(this).text().toLowerCase();
    
  $(".wrapper_preview #preview").removeClass("previewa_ctive");

	if( valeurFiltre == "graphisme") {
	
	$(".wrapper_preview #preview").toggleClass("preview_active");	
	}
//	else {

		$(".wrapper_preview #preview").each(function() {

			if(!$(this).hasClass(valeurFiltre)) {

		//		$(this).hide();
		//	} else{
		//		$(this).show(); 
          $(this).removeClass("previewa_ctive");
          } else{
          $(this).toggleClass("preview_active");
			}
		});
	//}
	return false;

	});

// ------------------------------------ //   
// SYSTEME REPLACE .HTML > DIV

$('#work #linkwork').click(function() {
  $('.section_two').addClass('loading_page');
  $("#work #linkwork").toggleClass("active");
  $(".exitbutton").addClass("active_exitbutton");
  $(".wrapper_preview #preview").hide();  

    loadContent( $(this).attr('href') );
    return false;
  });
  function loadContent(page){
    $.ajax({
      url: page,
      success: function(data) {
      $('#into_page').html(data);
      }
    });
  }

// ------------------------

Modifié par newger (27 Jan 2018 - 20:46)