CODEWITHSUNDEEP
javascripthtml
Ben Elgar
Ben Elgar

Reputation: 785

Animated Collapse of Webpage Sections

I've just started with JavaScript, and I would like to implement an animated collapse of certain sections of the page.

Across the top of my page I have a nav bar that contains links to all of the sections of the page. What I want to happen when I click one is:

  1. The currently displayed section collapses to nothing
  2. The requested section expands (ideally simultaneously) to fill the remaining space
  3. The URL to change reflecting this new selection

I want number three so that it elegantly downgrades if JavaScript is not installed, and so that if someone opens it in a new tab it still works.

So how would I go about implementing this? Is this possible/sensible to do with just JavaScript? Or do I really need to go about learning PHP? (I know ASP.NET, but don't have it on my server)

Upvotes: 0

Views: 222

Answers (1)

arknave
arknave

Reputation: 613

This is feasible/doable. To implement this, I would probably should use Jquery+AJAX. Just override the link redirects in the navbar to use AJAX. The animations can be done using JQuery or some other library. The .load looks good.

For updating the URL bar, you can use window.pushState and other associated methods. Keep in mind some old versions of IE don't support pushState, so it might be better to disable Javascript for them.

Upvotes: 1

Related Questions