Question

Are there any jQuery plug-ins that can do something similar to this: Acer Site?

I have a client who wants this functionality and not knowing what it’s even called means I can’t Google it and my javascript isn’t good enough to clone it.

Answer 1

You mean the elements that slide to the right? You can just use the animate method. Float div elements side by side, where the initial width of the elements to the left is zero. To show a box you animate the with of an element and then show the content inside it.

Example:

<style type="text/css">

.slideBox { float: left; margin: 2px; width: 0; height: 200px; background: #eee; }
.slideBox .content { display: none; margin: 10px; background: #ccc; }
#first { width: 100px; }
#first .content { display: block; }

</style>

<script type="text/javascript">

$(function(){
  $('#first').click(function(){
    $('#second').animate(
      { width: '100px' },
      {complete:function(){ $('#second .content').css('display','block'); }}
    );
  });
  $('#second').click(function(){
    $('#third').animate(
      { width: '100px' },
      {complete:function(){ $('#third .content').css('display','block'); }}
    );
  });
  $('#third').click(function(){
    $('#fourth').animate(
      { width: '100px' },
      {complete:function(){ $('#fourth .content').css('display','block'); }}
    );
  });
});

</script>

<div class="slideBox" id="fourth"><div class="content">fourth</div></div>
<div class="slideBox" id="third"><div class="content">third</div></div>
<div class="slideBox" id="second"><div class="content">second</div></div>
<div class="slideBox" id="first"><div class="content">first</div></div>