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

Answer 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)

Answer 2

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()

Answer 3

FIDDLE

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

Answer 4

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.