CODEWITHSUNDEEP
jqueryscrollslidedown
Ivan
Ivan

Reputation: 1241

Scroll to an element after a click with slide down in jQuery

I was looking how to scroll into next element like this:

http://www.grittirollo.it/

Click those big letters and it does scroll to current element after of click and slide down effect.

There is my attempt: (JSFiddle: http://jsfiddle.net/d272P/)

HTML 

<div id="head1">Click</div>
<div id="child1">Content</div>

<br/>

<div id="head2">Click</div>
<div id="child2">Content</div>

<br/>

<div id="head3">Click</div>
<div id="child3">Content</div>

CSS 

#head1{width: 400px; height: 40px; background: orange;}
#head2{width: 400px; height: 40px; background: red;}
#head3{width: 400px; height: 40px; background: purple;}

#child1{width: 300px; height: 700px; background: green; display: none;}
#child2{width: 300px; height: 700px; background: cyan; display: none;}
#child3{width: 300px; height: 700px; background: pink; display: none;}

JavaScript 

$('#head1').click(function() {
  $('#child1').animate({
    opacity: 'toggle',
    height: 'toggle'
  },
  {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'
    },
  }
  );
});

$('#head2').click(function() {
  $('#child2').animate({
    opacity: 'toggle',
    height: 'toggle'
  },
  {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'
    },
  }
  );
});

$('#head3').click(function() {
  $('#child3').animate({
    opacity: 'toggle',
    height: 'toggle'
  },
  {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'
    },
  }
  );
});

Upvotes: 1

Views: 929

Answers (2)

Jagz S
Jagz S

Reputation: 907

this functionality can be achived by using jquery accordion

check the link http://jqueryui.com/demos/accordion/

Upvotes: 0

Matt Tew
Matt Tew

Reputation: 1621

JQuery ScrollTo should do the trick

Edit

After reviewing the sample site, I realise that JQuery UI accordian might be the better option.

Upvotes: 1

Related Questions