Wifeo Creative Code

<<< back to homepage for others creatives tricks

JQUERY SLIDE FORM

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="kFgLB" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/kFgLB'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/48-jquery-slide-form.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.titre {
	color:#ffffff;
	font-size:24px;
}

.btn_noir{
	font-size:14px;
	cursor:pointer;
	padding:8px;
	border-radius:2px;
	background-color: #333333;
	color:#ffffff;
	display:inline-block;
	margin:8px;
	font-weight:500;
	width:100px;
}

.champtxt
{
  width:300px;
  font-size:16px;
  padding:5px;
  margin:0px;
}

.btn_noir:hover{
	background-color:#000000;
}

#bloc_recherche_couleur{
	background-color:#ffbe40;
	width:100%;
	height:200px;
	display:none;
}


#btn_recherche{
	background-color:#ffbe40;
	width:400px;
	margin-bottom:20px;
	color:#ffffff;
	font-weight:500;
	text-align:center;
	padding:10px;
	border-radius:0px 0px 3px 3px;
	cursor:pointer;
}

JAVASCRIPT CODE :

$( document ).ready(function() {

	$( "#btn_recherche" ).click(function() {
		var statut = $(this).attr( "statut" );
		$("#bloc_recherche_couleur").slideToggle("slow");
		if(statut=="ferme")
		{
			$(this).attr('statut',"ouvert"); 
			$(this).html('CLOSE THE QUIZ');
		}
		else
		{
			$(this).attr('statut',"ferme"); 
			$(this).html('OPEN THE QUIZ');
		}
	});


	$(".etape_suivante").click(function (){
		var etape_actuelle=$(this).attr('etape');
		var etape_suivante=parseInt(etape_actuelle)+1;
      var curHeight = $("#etape"+etape_actuelle+"_recherche").height();
	   var autoHeight = $("#etape"+etape_suivante+"_recherche").height();

      $("#etape"+etape_actuelle+"_recherche" ).hide("slide", { direction: "up" }, 300, function() {
$('#bloc_recherche_couleur').height(curHeight+40).animate({height: autoHeight+40}, 300, function() {
$("#etape"+etape_suivante+"_recherche" ).show("slide", { direction: "down" }, 300);
			});
	  });
	});

	$(".etape_precedente").click(function (){
		var etape_actuelle=$(this).attr('etape');
		var etape_precedent=parseInt(etape_actuelle)-1;
      var curHeight = $("#etape"+etape_actuelle+"_recherche").height();
	   var autoHeight = $("#etape"+etape_precedent+"_recherche").height();
	
      $("#etape"+etape_actuelle+"_recherche" ).hide("slide", { direction: "down" }, 300, function() {
$('#bloc_recherche_couleur').height(curHeight+40).animate({height: autoHeight+40}, 300, function() {
$("#etape"+etape_precedent+"_recherche" ).show("slide", { direction: "up" }, 300);
	   });
	   
	   });
	});


	$( "#terminer" ).click(function() {

		//HERE SUBMIT THE FORM WITH AN AJAX REQUEST (serialize #myform's inputs, etc...)...

		$("#bloc_recherche_couleur").slideToggle("slow");
		$("#btn_recherche" ).html('OPEN THE QUIZ');
		$(".div_cache").hide();
        $(".champtxt").val('');
		$("#etape0_recherche" ).show(1500);
	});
});

HTML CODE :

<div align="center">
<form id="myform">
<div id="bloc_recherche_couleur" >

    	<div id="etape0_recherche" style="color:#ffffff;"><br/>
            <div class="titre">WELCOME IN MY JUNGLE</div><br/>
           I want to know you, could you please say me more about you ?<br/><br/>
            <div  class="btn_noir etape_suivante" etape="0">Begin...</div><br/><br/>
        </div>

        <div id="etape1_recherche" class="div_cache" style="display:none; text-align:center;"><br/>
<div class="titre">Do you speak english ?</div><br/>
<input type="text" name="" id="" value="" placeholder="Speak english ?" class="champtxt" /><br/><br/>
<div class="btn_noir etape_precedente" etape="1">PREVIOUS</div>
          <div class="btn_noir etape_suivante" etape="1">NEXT</div>
        </div>

        <div id="etape2_recherche" class="div_cache" style="display:none; text-align:center;"><br/>
<div class="titre">Do you have a british accent ?</div><br/>
<input type="text" name="" id="" value="" placeholder="British accent ?" class="champtxt" /><br/><br/>
          <div class="titre">And why ?</div><br/>
            <input type="text" name="" id="" value="" placeholder="Why ???" class="champtxt" /><br/><br/>
           <div class="btn_noir etape_precedente" etape="2">PREVIOUS</div>
          <div class="btn_noir etape_suivante" etape="2">NEXT</div>
        </div>

        <div id="etape3_recherche" class="div_cache" style="display:none; text-align:center;"><br/>
<div class="titre">Do you like barbecues ?</div><br/>
            <input type="text" name="" id="" value="" placeholder="Bbq ?" class="champtxt" /><br/><br/>
           <div class="btn_noir etape_precedente" etape="3">PREVIOUS</div>
          <div class="btn_noir etape_suivante" etape="3">NEXT</div>
        </div>

         <div id="etape4_recherche" class="div_cache" style="display:none; color:#ffffff;"><br/>
            <div class="titre">Thanks ! </div><br/>
             Now I know you...<br/> <br/>
            <div class="btn_noir etape_precedente" etape="4">PREVIOUS</div>
           <div class="btn_noir" id="terminer">SAVE &amp; CLOSE</div>
        </div>


</div>
<div id="btn_recherche" statut="ferme">BEGIN THE QUIZ</div>
</form>
</div>