$(document).ready(function(){ // Toggles paragraphs with different speeds $(".domicile").click(function(){ $("p.dom1").show(2000); $("p.dom1").addClass("active"); $("button.dom2").fadeIn(2000); $("button.dom3").fadeIn(2000); $("button.dom4").fadeIn(2000); $(".domicile").addClass("clickon"); $(".domicile").removeClass("clickoff"); $(".temporaire").addClass("clickoff"); $(".temporaire").removeClass("active clickon"); $(".etab1").addClass("clickoff"); $(".etab1").removeClass("active clickon"); $(".etablissement").addClass("clickoff"); $(".etablissement").removeClass("active clickon"); $("p.temp31").removeClass("active clickon"); $("p.temp32").removeClass("active clickon"); $("p.temp1").removeClass("active clickon"); $("p.etablissement").removeClass("active clickon"); $("p.dom1").removeClass("clickon"); $("p.etab1").removeClass("active clickon"); }); $(".retour").click(function(){ $(".domicile").fadeIn(2000); $(".domicile").removeClass("clickon clickoff"); $(".temporaire").fadeIn(2000); $(".temporaire").removeClass("clickon clickoff"); $(".etablissement").fadeIn(2000); $(".etablissement").removeClass("clickon clickoff"); // $("button.dom2").fadeOut(2000); // $("button.dom3").fadeOut(2000); // $("button.dom4").fadeOut(2000); $("p.dom31").removeClass("active"); $("p.dom31").removeClass("clickon"); $("p.dom32").removeClass("active"); $("p.dom32").removeClass("clickon"); $("p.dom41").removeClass("active"); $("p.dom41").removeClass("clickon"); $("p.dom42").removeClass("active"); $("p.dom42").removeClass("clickon"); $("p.temp31").removeClass("active"); $("p.temp31").removeClass("clickon"); $("p.temp32").removeClass("active clickon"); $("p.temp32").removeClass("clickon"); $("p.temp1").removeClass("active clickon"); $("p.dom1").removeClass("active"); $("p.dom1").removeClass("clickon"); $("p.etab1").removeClass("active clickon"); $(".retour").removeClass("active") }); $(".dom2").click(function(){ $("p.dom2").show(2000); $("p.dom2").addClass("active"); // $("p.dom31").hide("slow"); // $("p.dom32").hide("slow"); $("p.dom41").fadeOut(500); $("p.dom41").removeClass("active"); $("p.dom41").removeClass("clickon"); $("p.dom42").fadeOut(500); $("p.dom42").removeClass("active"); $("p.dom42").removeClass("clickon"); $("button.domicile").fadeOut(200); $(".temporaire").fadeOut(200); $("p.dom1").addClass("clickon"); $("button.retour").fadeIn(2000); $("button.retour").addClass("active"); }); $(".dom3").click(function(){ $("p.dom2").show(2000); $("p.dom2").addClass("active"); $("p.dom31").show("slow"); $("p.dom31").addClass("active"); $("p.dom32").show("slow"); $("p.dom32").addClass("active"); $("p.dom41").removeClass("active clickon"); $("p.dom42").removeClass("active clickon"); $("button.domicile").fadeOut(200); $(".temporaire").fadeOut(200); $(".etablissement").fadeOut(200); $("p.dom1").addClass("clickon"); $("button.retour").fadeIn(2000); $("button.retour").addClass("active"); }); $(".dom4").click(function(){ $("p.dom2").show(2000); $("p.dom2").addClass("active"); $("p.dom41").show("slow"); $("p.dom41").addClass("active"); $("p.dom42").show("slow"); $("p.dom42").addClass("active"); $("p.dom31").removeClass("active clickon"); $("p.dom32").removeClass("active clickon"); $("button.domicile").fadeOut(200); $(".temporaire").fadeOut(200); $(".etablissement").fadeOut(200); $("p.dom1").addClass("clickon"); $("button.retour").fadeIn(2000); $("button.retour").addClass("active"); }); $(".temporaire").click(function(){ $("p.temp1").show(2000); $("p.temp1").addClass("active"); $("button.temp2").fadeIn(2000); $("button.temp3").fadeIn(2000); $("button.temp4").fadeIn(2000); $(".temporaire").addClass("clickon"); $(".temporaire").removeClass("clickoff"); $("button.domicile").addClass("clickoff"); $("button.domicile").removeClass("clickon"); $(".etablissement").addClass("clickoff"); $(".etablissement").removeClass("clickon"); $("p.etablissement").removeClass("active clickon"); $("p.dom1").removeClass("active clickon"); $("p.etab1").removeClass("active clickon"); }); $(".temp3").click(function(){ // $("p.temp2").show(2000); // $("p.temp2").addClass("active"); $("p.temp31").show("slow"); $("p.temp31").addClass("active"); $("p.temp32").show("slow"); $("p.temp32").addClass("active"); $("button.domicile").fadeOut(200); $("button.temporaire").fadeOut(200); $("button.etablissement").fadeOut(200); $("p.temp1").addClass("clickon"); $("button.retour").fadeIn(2000); $("button.retour").addClass("active"); $("p.dom1").fadeOut(2000); $("p.dom1").removeClass("active"); $("p.dom1").removeClass("clickon"); }); $(".etablissement").click(function(){ $("p.temp1").removeClass("active"); $("p.etab1").show(2000); $("p.etab1").addClass("active"); $(".etablissement").addClass("clickon"); $(".etablissement").removeClass("clickoff"); $(".temporaire").addClass("clickoff"); $(".temporaire").removeClass("clickon"); $(".domicile").addClass("clickoff"); $(".domicile").removeClass("clickon"); $("p.dom1").fadeOut(2000); $("p.dom1").removeClass("active"); $("p.dom1").removeClass("clickon"); }); }); :focus, a:active { outline: 0; border: 0 } p { background: #02546b; border-radius: 25px; margin: 3px; width: 80px; display: none; float: left; text-align: center; } button { background: #02546b; color: #FFFFFF; border-radius: 25px; width: 322px; padding: 15px; font-size: 22px; position: absolute; left: 10%; margin: 10px; border: 0 } button:hover{ background: #f7a914; } /*button:hover span { color: #000000 }*/ button.domicile, button.temporaire, button.etablissement { transition: 1.5s; } button.domicile.clickon, button.temporaire.clickon, button.etablissement.clickon, button.domicile.clickoff, button.temporaire.clickoff, button.etablissement.clickoff { transform: translate(-100px, 0px); transition: transform 1.5s; opacity: .5; background: #f7a914; } span.ligne1 { color: #fff; font-weight: bold; } button:hover span.ligne1, button.clickon .ligne1 { color: #02546b; font-weight: bold; transition: 1.5s; } span.ligne2 { color: #f7a914; } button:hover span.ligne2, button.clickon .ligne2, button.clickoff .ligne2 { color: #fff; transition: 1.5s; } button.temporaire { top: 100px; left: 15%; } button.etablissement { top: 200px; left: 15%; } p.dom1, p.dom1.b, p.temp1, p.temp1.b, p.etab1, p.etab1.b { transform: translate(-200px, 0px); transition: 1.5s linear; margin-left: 650px; opacity: 0; position: absolute; } p.dom1.b, p.dom32, p.dom42, p.temp1.b, p.temp32, p.etab1.b { top: 100px; } p.dom1.c { top: 240px; } p.dom1.active, p.dom1.b.active, p.temp1.active, p.temp1.b.active, p.etab1.active, p.etab1.b.active { opacity: 1; margin-left: 450px; } p.dom1.clickon, p.dom1.b.clickon, p.temp1.clickon, p.temp1.b.clickon, p.etab1.clickon, p.etab1.b.clickon { margin-left: 92px; transition: 2s; opacity: 0.5; } p.dom1.fadeout, p.temp1.fadeout, p.etab1.fadeout { opacity: 0; transform: translate(0) } p.dom31.active, p.dom32.active, p.dom41.active, p.dom42.active, p.temp31.active, p.temp32.active { margin-left: 240px; opacity: 1; } p.dom31, p.dom32, p.dom41, p.dom42, p.temp31, p.temp32 { margin-left: 450px; position: absolute; opacity: 0; transition: 1.5s linear; } .nav-bouton { display: flex; position: absolute; top: 20%; left: 20%; transform: translate(-50%,-50%) } .retour { margin-top: 400px; opacity: 0; transition: 1s; } .retour.active { opacity: 1; }