external links not working html/javascript

Question

I have created a click to show option on one of my client's website. Which is working perfectly there. Its respective code is given below.

<style>
a{padding:0;margin:0;color:#009cbb;font-weight:bold;text-decoration:none;}
</style>
<p>
<div><a href="#welcome" onclick="toggle_visibility('welcome');">Welcome</a></div>
<div id="welcome" style="display:none;">This is test</div>

<div><a href="#focus" onclick="toggle_visibility('focus');">Focus</a></div>
<div id="focus" style="display:none;">This is test2
</div>

<div><a href="#cataracts" onclick="toggle_visibility('cataracts');">Cataracts</a></div>
<div id="cataracts" style="display:none;">This is test2
</div>
</p>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>

When i link test1 from an external page Its should display test1 and keep close the other 2 but the problem is when I click on the link it shows all of them as closed.

The linking code is

<a href="http://website.com/page.php#welcome" style="color:#009bd9;text-decoration:none;">Read More ></a>

Kindly help me when someone click on Read more it displays the welcome message as open and others as closed.

Thanks

Thanks for the quick response bro, sorry that didn't worked. — Bangash
– Bangash, Commented Jan 16, 2014 at 7:39

mplungjan · Accepted Answer · 2014-01-16 08:42:12Z

1

Try this - tested in IE8, Chrome32 and Fx 24 on windows

Live Demo Live Demo With Hash

function toggle_visibility(link) {
  var id = link.hash.substring(1);
  var obj = document.getElementById(id);
  if (obj) obj.style.display = obj.style.display == "block"?"none":"block";
  return false;
}
window.onload=function() {
  var id = location.hash?location.hash.substring(1):"";
  if (id)  document.getElementById(id).style.display="block";
}

using this format on each link (which should also be refactored to be unobtrusive)

onclick="return toggle_visibility(this);"

Please note the (this)

edited Jan 16, 2014 at 8:42

answered Jan 16, 2014 at 7:38

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vinczemarton Over a year ago

@mplungjan I edited your code because it was syntactically incorrect. Now that you rolled back, it is incorrect again as you don't close the 'block string.

mplungjan Over a year ago

Right - Thanks. Your fix was lost in annoying space changes :/

mplungjan Over a year ago

@Bangash Try again - perhaps a jsfiddle.net would be useful

vinczemarton Over a year ago

Sorry for the space changes, I tidyupped it in jsfiddle mostly because the html part, the javascript alignments were collateral damage. I respect your coding standards and don't want to enforce anything on your code :D

vinczemarton · Accepted Answer · 2014-01-16 09:00:45Z

1

HA I finally figured out what you want!

So you want the element to be opened on page load if the link ends with #element_id.

Your script tag currently:

<script type="text/javascript">
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
    e.style.display = 'none';
    else
    e.style.display = 'block';
    }
</script>

Change it to:

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block') e.style.display = 'none';
        else e.style.display = 'block';
    }

    var parts = window.location.split('#'),
        hash = '';
    if (parts.length > 1) {
        hash = parts[1];
    }    
    if (hash !== '') {
        toggle_visibility(hash);
    }
</script>

EDIT:

window.location.hash is apparently supported everywhere. You might want to use that instead of string.split()

edited Jan 16, 2014 at 9:00

answered Jan 16, 2014 at 8:07

vinczemarton

8,2267 gold badges59 silver badges91 bronze badges

3 Comments

vinczemarton Over a year ago

@Bangash Just tell me this: Have I understood your question correctly? Do you want the element to be visible (opened) on page load if the url contains a #something part?

mplungjan Over a year ago

You may want to do the second part in a window.onload

mplungjan Over a year ago

I have no issues with location.hash or link.hash in Chrome - you are looking in the wrong documentation - now your code cannot be used by OP any more due to the "fakelocation"

Siva Tumma · Accepted Answer · 2014-01-16 08:14:00Z

0

Though I did not clearly understand your problem, I have modified your function based on my assumptions.

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.visibility == 'visible') {
        e.style.display = 'none';
        e.style.visibility = "hidden";
    } else {
        e.style.display = 'block';
        e.style.visibility = 'visible';
    }
}

Please let us know what are the modifications you find needed.

answered Jan 16, 2014 at 8:14

Siva Tumma

1,70112 silver badges23 bronze badges

Comments

Merlin · Accepted Answer · 2014-01-16 08:51:00Z

0

FIDDLE

window.onload = function(){
        toggle_visibility(window.location.hash.substring(1));
}

edited Jan 16, 2014 at 8:51

answered Jan 16, 2014 at 7:55

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Collectives™ on Stack Overflow

external links not working html/javascript

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related