• 0

[javascript] Use url hash to toggle div display


Question

So I have a simple page setup where clicking on various links will toggle their correspondent divs from sliding in and showing some info (hidden by default). It was important for me that clicking on a link would first slide out the currently visible one (if anything was clicked beforehand) before sliding in the next one. You can check the exact behavior, albeit different code example here: http://jsfiddle.net/b7C2d/1/

The problem I'm having now is that I can't figure out how to incorporate the url hash to make the div visible when the appropriate link is visited. In this example, if I open website.com/#panel-one,  I would like the appropriate div to be shown, with the rest of the functionality the same as in the example above (if I click on the link titled "Two" I would like the currently visible one to slide out and panel-two to slide in).

Any help would be greatly appreciated.

6 answers to this question

Recommended Posts

  • 0

Since you got similiar code twice now I suggest to put the code into a function and pass the variable to that function like this:

http://jsfiddle.net/b7C2d/537/

  • 0

Since you got similiar code twice now I suggest to put the code into a function and pass the variable to that function like this:

http://jsfiddle.net/b7C2d/537/

Is there a reason you recommend return false; over e.preventDefault(): ? I've never seen anything documented suggesting one over the other and it's got me a little curious.

  • 0

Is there a reason you recommend return false; over e.preventDefault(): ? I've never seen anything documented suggesting one over the other and it's got me a little curious.

I suggest e.preventDefault(); over return false, not the other way around :p

And here's a css-tricks read about the difference: https://css-tricks.com/return-false-and-prevent-default/

So simply said, use e.preventDefault(); in probably all cases.

  • Like 1
  • 0

I suggest e.preventDefault(); over return false, not the other way around :p

And here's a css-tricks read about the difference: https://css-tricks.com/return-false-and-prevent-default/

So simply said, use e.preventDefault(); in probably all cases.

Okay I just misread it then, I have always used preventDefault because that was just what I learned would negate the regular effects of an action, I thought your were suggesting to use return false which to me wouldn't be logical (personal opinion speaking mostly there). Good read nonetheless, thanks :)

  • 0

Since you got similiar code twice now I suggest to put the code into a function and pass the variable to that function like this:

http://jsfiddle.net/b7C2d/537/

I missed the replies because I found a solution for it in the meantime, and of course, forgot to check back on this topic. Thank you very much for your assistance either way, greatly appreciated.

This topic is now closed to further replies.