How to open a hidden div when a hash is on the URL

Question

I'm using this javascript code to have a couple "show/hide" toggled divs on my site:

<script language="javascript"> 
function toggledean() {
    var ele = document.getElementById("toggleTextdean");
    var text = document.getElementById("displayTextdean");

    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show more";
    } 
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>

What should I add to this code to have the div be displayed upon loading the page with a specific #hash added to the URL?

Thank you very much.

Answer 1

Something like this should work:

<script>
    var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).style.display = 'block'
    }
</script>

If you've only got the one element, like your script has, you could just call the function to toggle it if any hash exists in the url:

<script type="text/javascript"> 
   function toggledean() {
    ...
    } 
    if (window.location.hash == '#dean') toggledean(); 
</script>

Or you could make your toggle script a little more universal:

<script type="text/javascript"> 

var hash = window.location.hash.replace('#', '');   

function toggle (elementPartial) {

    var ele = document.getElementById('toggleText'+elementPartial);
    var text = document.getElementById('displayText'+elementPartial);
    if(ele.style.display == 'block') {
        ele.style.display = 'none';
        text.innerHTML = 'Show more';
    } else {
        ele.style.display = 'block';
        text.innerHTML = 'Hide';
    }
} 

if (hash) {
    toggle(hash); 
}

</script>

Additionally, you could make this a little simpler and more flexible using a javascript framework, like jQuery.

Answer 2

Others have answered the URL hash part, I'll just comment on the script:

> <script language="javascript">  

The language attribute is deprecated, type is required, so:

<script type="text/javascript">

> function toggledean() {
>     var ele = document.getElementById("toggleTextdean");
>     var text = document.getElementById("displayTextdean");
> 
>     if(ele.style.display == "block") {

The default display property is '' (empty string) unless you have set it to "block" previously.

>         ele.style.display = "none";
>         text.innerHTML = "Show more";
>     } else {
>         ele.style.display = 'block';
>         text.innerHTML = 'Hide';
>     }

Given the very high probability that the div will have a display value of '' when first loaded, you are much better off testing for style.display = 'none', so:

if (ele.style.display == 'none') {
    ele.style.display = '';
    text.innerHTML = 'Hide';

} else {
    ele.style.display = 'none';
    text.innerHTML = 'Show more';
}

Answer 3

This is not the javascript answer that you want, but you could try playing around with the :target pseudo selector. For instance,

<!-- HTML -->
<div id="foo">show this with #foo.</div>
<div id="bar">#bar shows this.</div>

<style type="text/css">
    div {display: none}
    :target {display: block}
</style>

Example: http://jsfiddle.net/ZAHns/4/ (thanks to Jared for the idea of adding the anchors).

Depending on what you are trying to do, this could possibly work, but think your requirements through.

Note: Take this response with a HUGE grain of salt -- don't use it.

---

To answer the actual question, use the following to determine if the hash is present:

var in_hash = location.hash.slice(1) === what_you_are_looking_for;
if (in_hash) ? /* IN HASH */ : /* NOT IN HASH */;