Show / hide a div PHP Wordpress

Question

<script type='text/javascript'>
function showDiv() {
    if (document.getElementById('hiddenDiv').style.display == 'block') {
        document.getElementById('hiddenDiv').style.display = 'none';
    } else {
        document.getElementById('hiddenDiv').style.display = 'block';
    }
}

    <div id="hiddenDiv"  style="display:none;" class="quiz" >
    <?php

    if (basename($_SERVER['REQUEST_URI']) == '?lang=intermediate'):
       echo do_shortcode( get_post_meta($post->ID, 'intermediate_quiz', true) );
    elseif (basename($_SERVER['REQUEST_URI']) == '?lang=advanced'):
        echo do_shortcode( get_post_meta($post->ID, 'advanced_quiz', true) );
    else:
        echo do_shortcode( get_post_meta($post->ID, 'beginner_quiz', true)     );
    endif;

    ?>

</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

I am currently trying to hide a div in a single.php on wordpress. I have successfully managed to hide it and show the button BUT when I click the button nothing appears/happens.

Anybody know what is going on?

Answer 1

I managed to fix it.

I put the script into the single.php instead of in the "additional Javascript" and below the div instead.

My code:

<input type="button" name="quiz" value="Take Quiz" onclick="showDiv()" />
<div id="quiz"  style="display:none;" class="quiz" >


    <?php

    if (basename($_SERVER['REQUEST_URI']) == '?lang=intermediate'):
       echo do_shortcode( get_post_meta($post->ID, 'intermediate_quiz', true) );
    elseif (basename($_SERVER['REQUEST_URI']) == '?lang=advanced'):
        echo do_shortcode( get_post_meta($post->ID, 'advanced_quiz', true) );
    else:
        echo do_shortcode( get_post_meta($post->ID, 'beginner_quiz', true) );
    endif;

    ?>

</div>


<script type='text/javascript'>
function showDiv() {
if (document.getElementById('quiz').style.display == 'block') {
    document.getElementById('quiz').style.display = 'none';
} else {
    document.getElementById('quiz').style.display = 'block';
}
}
</script>