Javascript show/hide will not hide properly in Safari

Question

It seems to be a problem with show/hide in Safari. The site looks good freshly loaded. But if you click on the first link up in the left corner and than go back, the show/hide function doesn't work so well anymore and you get layers on top of each other. Note: This problem only occours in Safari.

I've used jQuery and here is my show hide code:

    <script type="text/javascript">
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
 </script>

Link to site: http://www.smudesign2012.co.uk/

enter image description here

score 0 · Accepted Answer · answered May 08 '12 at 18:51

0

I would suggest you use jquery to show/hide the elements.

function show(id){
    $('.student').hide(); // hide all students
    $('#'+id).show(); // show the student with applied ID
}

function hide(id){
    $('#'+id).hide(); // is this needed? Why not do the next one and skip the parameter to the function?
    $('.student').hide();
}

answered May 08 '12 at 18:51

Rene Pot

24,681
7
68
92

Thank you! This did the trick. I also added the hide command on document ready, so it will start up blank. Thank's again! :D – Eirik May 08 '12 at 19:17

score 0 · Answer 2 · answered May 08 '12 at 18:52

try this and note the difference in .style.display

 <script type="text/javascript">
  function show(id) {
    document.getElementById(id).style.display= "";
  }
  function hide(id) {
    document.getElementById(id).style.display= "none";
  }
 </script>

Javascript show/hide will not hide properly in Safari

2 Answers2

Linked