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.

Translation: Please do it for me and I guarantee it will work if you're right. — Jared Farrish, Aug 01 '11 at 04:07
@jared I'm sorry, I didn't mean for it to come off like that. I've been researching this for a few hours without luck and I'm very new to JavaScript so I thought I'd post here for some help. I didn't think that was too terrible. — Dean, Aug 01 '11 at 04:24
If you're not averse to jQuery, see http://stackoverflow.com/questions/680785/on-window-location-hash-change. — Jared Farrish, Aug 01 '11 at 04:28

TJ Koblentz · Answer 1 · 2011-08-01T04:30:09.000

7

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 */;

edited Aug 01 '11 at 04:30

answered Aug 01 '11 at 04:14

TJ Koblentz

6,908
1
17
16

@mikeycgto Good point. Not supported in IE makes it ONE of the issues with using this. ;) – TJ Koblentz Aug 01 '11 at 04:19
@Jared Farrish Silly me! Genius to add the anchor tag... I'll add both, edit my answer, and credit you. Thanks! – TJ Koblentz Aug 01 '11 at 04:20
JavaScript can always override the `:target` rule. I gather he'll still need to use the function to toggle the divs later somehow... (I think both can be used together, though) – BoltClock Aug 01 '11 at 04:21
Reality is, it's probably not that easy; what if the OP needs a cross-browser, CSS2(ish) answer? What then? – Jared Farrish Aug 01 '11 at 04:22
I added the fact that this shouldn't at all be used, it was just a little thought. The fact that IE doesn't support :target is a deal breaker in itself but for the record, :target's support list: Firefox (1.0+), Safari (3.1+), Opera (9.5+), Chrome [http://reference.sitepoint.com/css/pseudoclass-target]. – TJ Koblentz Aug 01 '11 at 04:26
@tjeezy May I say than nowadays your answer is the perfect solution? http://caniuse.com/#search=%3Atarget – mzrnsh Jul 23 '15 at 11:00
@mizurnix While this accomplishes the question asked, this is probably not the best way to go about showing / hiding different things. – TJ Koblentz Apr 20 '16 at 21:52

hellodaniel · Answer 2 · 2017-06-21T13:38:55.373

6

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.

edited Jun 21 '17 at 13:38

answered Aug 01 '11 at 04:27

hellodaniel

154
7

location.hash includes the actual hash character, so this solution (the use of getElementById(...)) will most likely not work unless the prepended hash character is accounted for. – schlimmchen Jun 21 '17 at 09:45
Man, that's digging up the past @schlimmchen... I don't even remember writing that. Made some amendments based on that info. – hellodaniel Jun 21 '17 at 13:41
I did not want to bother you, @hellodaniel. I found this question despite its age and your answer helped in my own javascript quest, but I just recognized it had this flaw... Thanks for amending it! – schlimmchen Jun 22 '17 at 12:00
I was able to use: ```` var hash = window.location.hash.replace('#', ''); if (hash) { document.getElementById(hash).classList.add("bio-open"); } ```` But the other functions on this page no longer work, so I can't close the window this script opened – Iisrael Sep 06 '19 at 16:56

score 0 · Answer 3 · answered Aug 01 '11 at 04:53

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';
}

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

3 Answers3

Linked