Question

I have a customized show/hide toggle script that I’m using along with CSS3 transitions for the effects.

The script shows the content when clicked, and hides it when the ‘HideLink’ link is clicked, complete with CSS3 transistions – but only in Opera.

In other browsers the script only works for showing the content, clicking the hide link doesn’t work.

See this JSfiddle: http://jsfiddle.net/xte63/

Answer 1

These days with show / hide javascript, I prefer to use HTML5’s data-* attributes.

This can already be used in non-HTML5 browsers via the getAttribute and setAttribute function.

I’ve quickly tried it against IE7, Chrome and Opera and it seems to work.

http://jsfiddle.net/ThJcb/

function showHide(shID) {
    var exDiv = document.getElementById(shID);
    if(exDiv.getAttribute("data-visible") != 'false'){
         document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';  
         document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';  
         exDiv.setAttribute("data-visible" , 'false');
    } else { 
         document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';  
         document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';   
          exDiv.setAttribute("data-visible" , 'true'); 
    }
}

This allows you to determine the state of the div without having to check for CSS values.

EDIT: As pointed out in the comments, a typo was on the hide link (onlick instead of onclick) which made it appear the above jsfiddle worked whereas it didn’t. At least not exactly as I made an error in the logic, setting the “data-visible” to false instead of true.

Here’s an updated jsfiddle: http://jsfiddle.net/ThJcb/4/
(javascript snippet above updated also)