HTML show/hide real use test

<html>
<head>
<title></title>
<script type="text/javascript">
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');
    }
}
</script>

<style type="text/css">
#ExampleDIV {
    height: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all opacity 300ms ease-in-out;
}
</style>
</head>
<body>


<a href="" class="ShowLink" id="ExampleDIV-show" onclick="showHide('ExampleDIV');return false;">Show the Content</a>

<div id="ExampleDIV" data-visible="false">
    <p>Some example content</p>
    <a href="" class="HideLink" id="ExampleDIV-hide" onclick="showHide('ExampleDIV');return false;">Hide the Content</a>
</div>


</body>
</html>