Wifeo Creative Code

<<< back to homepage for others creatives tricks

THREE PARTS JQUERY ANIMATE

NOW, OPEN THE THREE !

MY FIRST

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

MY SECOND

MY THIRD

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="LHroc" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/LHroc'>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/44-three-parts-jquery-animate.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

#col1{
  background-image:url(http:YOUR-URL-IMAGE.jpg);
  background-color: #e7e7e7;
  background-repeat: no-repeat;
  height:470px;
}
#col2{
  background-image:url(http:YOUR-URL-IMAGE.jpg);
  background-color: #e7e7e7;
  background-repeat: no-repeat;
  height:470px;
}
#col3{
  background-image:url(http:YOUR-URL-IMAGE.jpg);
  background-color: #e7e7e7;
  background-repeat: no-repeat;
  height:470px;
}
.alltitle{
  color:#ffffff;
  font-weight:bold; 
  font-size:20px;
}
.allcontent{
  font-size:17px;
  padding-left: 100px;
  text-align: left;
}
.openzone{
  padding:0px 10px;
  cursor:pointer;
}

JAVASCRIPT CODE :

$(document).ready(function(){
	$('.openzone').click(function(){

		var zone = $(this).attr('zone');

		if(zone=='1')
		{
			var autre1='2';
			var autre2='3';
		}
		else if(zone=='2')
		{
			var autre1='1';
			var autre2='3';
		}
		else if(zone=='3')
		{
			var autre1='1';
			var autre2='2';
		}

		if(zone!='lestrois')
		{
			$('#contentzone'+autre1).hide();
			$('#contentzone'+autre2).hide();

			$('#col'+autre1).animate({width: '70px'},200);
			$('#col'+autre2).animate({width: '70px'},200);
			$('#col'+zone).animate({width: ''},200)
			.queue(function() {
				$('#contentzone'+zone).show();
				$( this ).dequeue();
			});

			$('#opener'+zone).hide();

			$('#opener'+autre1).show();
			$('#opener'+autre2).show();

			$('#title'+zone).css("font-size","20px");
			$('#title'+autre1).css("font-size","12px");
			$('#title'+autre2).css("font-size","12px");

		}
		else if(zone=='lestrois')
		{
			$('.allcol').animate({width: '33%'},200)
           .queue(function() {
				$('.allcontent').show();
				$( this ).dequeue();
			});

			$('.openzone').show();

			$('.alltitle').css("font-size","20px");
		}
		return false;
	});
});

HTML CODE :

<div align="center">
  <span class="openzone" zone="lestrois" id="autoclicklestrois">NOW, OPEN THE THREE !</span>
  <div style="width:800px">
<table border="0" cellpadding="10" cellspacing="5" width="100%">
  <tr>
<td id="col1" valign="top" align="center" class="allcol">
<img src="http:YOUR-URL-IMAGE.png" class="openzone" zone="1" id="opener1"/>
      <div class="alltitle" id="title1">MY FIRST</div>
      <br>
      <div id="contentzone1" class="allcontent">
        Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit.</div>
      
    </td>
<td id="col2" valign="top" align="center" class="allcol">
<img src="http:YOUR-URL-IMAGE.png" class="openzone" zone="2" id="opener2"/>
      <div class="alltitle" id="title2">MY SECOND</div>
      
      <br>
      <div id="contentzone2" class="allcontent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit.</div>
      
    </td>
<td id="col3" valign="top" align="center" class="allcol">
<img src="http:YOUR-URL-IMAGE.png" class="openzone" zone="3" id="opener3"/>
      <div class="alltitle" id="title3">MY THIRD</div>
      
      <br>
      <div id="contentzone3" class="allcontent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit.</div>
      
    </td>
  </tr>
</table>
  </div>
</div>