How to Hide/Show DIVs Client-Side Using JavaScript


<!-- Hazard & Controls -->
<a id="linkHazardsAndControls" class="HazardsAndControlslink" href="Javascript:void(0)"
    onclick="ShowHazardsAndControls(this);">Hazards &amp; Controls</a>


<div id="DIVHazardAndControls" style="display: none">
    What you want to hide or show in here
</div>


<script language="javascript" type="text/javascript">
    function ShowHazardsAndControls(linkReference) {
        if (linkReference.innerHTML == 'Hazards &amp; Controls') {
            document.getElementById('DIVHazardAndControls').style.display = 'inline';
            linkReference.innerHTML = 'Hide Hazards &amp; Controls';
        }
        else {
            document.getElementById('DIVHazardAndControls').style.display = 'none';
            linkReference.innerHTML = 'Hazards &amp; Controls';
        }
    } 
</script>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s