viewing the content by fading in to the right

[botpro7]

hi guys, have some problem here. i’ve been trying to fade in content using jQuery, but everytime i clicked the link on the left, the page view went wrong.

Let say when i click “CSS” link on the left, the content faded in but the header is pushed away.

This is the [example](http://cdpn.io/kBvFt “example” )

Check out this Pen!

I want to create something like the [SNIPPETS](https://css-tricks.com/snippets/ “sinppets”) page. Where the page view is static when we click the menu on the left.
Please help….
Another more simple methods are welcome. Thanks in advanced. :)

[pixelgrid]

what makes your page jump on link click is the href of #and id which has a special meaning in browsers . takes the page to the point where that id is found.your content changes and the id is found right next to the navigation making the header disappear from view.

this code does what you want

$(‘a’).click(function(e){
e.preventDefault();
$(‘#intro’).hide();
$(‘.hideAll’).hide();
var to_show = $(this).attr(‘id’)+’Play’;
console.log(to_show);

$(‘#’+to_show).show();

});
1 click doesnt do anything
2 hides the into text ass well as every other open article
3 shows the text related to the link

[botpro7]

Thank you for helping me pixelgrid! Your code works. But i have another problem if i add another link in the page. Let say i add links (Home, About, Contact, Forum) in the header. The links are dead if i click it. How am i gonna resolve this matter? thanks again in advanced.

[pixelgrid]

give the ul in the sidebar a special class like this(class given is content)

ul class = ‘content’>

[botpro7]

ok i get it. Thanks again pixelgrid! you are very helpfull

[Author]

Posts