Javascript - toggled content function only works once

Question

Not really at ease when it comes to coding, I would appreciate your help on an issue I am facing:

On a landing page, some content should be visible on click or by clicking on a table of content on the top of the page.

On-click toggle works. However, clicking on a menu item, works only once. Then, if I go back to the menu and click on another item of the menu, nothing happens

My guess is that the problem comes from scripts which are "separated" while they should be merged together.

Here is the code:

<style type="text/css">
    a img
    {
    border: 0;
    }
</style>
<style>
    .ToggleTarget {
    display: none;
    }
</style>
<script type="text/javascript">
            function toggle(id) {
                var el = document.getElementById(id);
                if (el.style.display == "block") {
                    el.style.display = "none";
                } else {
                    el.style.display = "block";
                    el.style.background= "white";
                }
            }
        </script>

<script type=text/javascript>
if ( location.hash.length > 1 )
{
    toggle(location.hash.substring(1));
}
</script>


Content

<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#1">Title1</a>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#2">Title2</a>

Content


<table cellspacing="0" cellpadding="0" width="100%">
                <tbody>
                    <tr>
                        <td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('1');">
                        <p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER1
                        </strong></p>
                        </a>
                        <div id="1" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT1
                        </div>
</td>
                    </tr>
                    <tr>
                        <td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('2');">
                        <p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER2
                        </strong></p>
                        </a>
                        <div id="2" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT2
                        </div>
</td>
                    </tr>
                </tbody>
            </table>

Many thanks!

Answer 1

How about changing

href="javascript:toggle('2”);

to

href="javascript:toggle('2');

Does this solve your problem?

Answer 2

You can create another function to handle the links : (juste behind the toggle function would work)

function goToContent(id){
    var el = document.getElementById(id);
    if(el.style.display != "block"){
        toggle(id);
    }
    el.scrollIntoView();
}

Then reference it in the html

<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="javascript:goToContent('1');">Title1</a>
<br>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="javascript:goToContent('2');">Title2</a>

See this fiddle : http://jsfiddle.net/qZLsB/13/

Although it should be working, a "cleaner" way to handle clicks would be to use JavaScript DOM events. If you feel like learning about it, you can read more on http://www.w3schools.com/js/js_htmldom_events.asp

Answer 3

Here is a simplified example of what you were trying to do. I think you just overcomplicated it. http://jsfiddle.net/j9HXk/

<p onclick="toggleContent('1')"><strong>HEADER1</strong></p>

You can use the

click event to do what you were doing. Then you can put some code in the onLoad event to check the hash at the end of the current URL and show/hide the appropriate section.

Let me know if you have any questions about how this is working.