How to display hidden div on anchor onclick with no href using Javascript within PHP code?

Question

I do not want my page to reload so I am not using PHP function and $GET to display a div in PHP.

I am trying to echo a table with td containing an anchor link which when onclicked will display the hidden div.

Here is the PHP code :

<?php
echo "<table><tr><td><a href='javascript:;' onclick=\"document.getElementById(\'detailsDiv\').style.display=\'block\'\">View Details</a></td></tr></table>";

 echo "<div id='detailsDiv' style='display: none;'>";
 echo "<h1>Hello World!!</h1>";
 echo "</div>";
 ?>

Also getting this error:

 SyntaxError: expected expression, got end of script

Answer 1

Your code throws an error, if you want a more cleaner way, try:

<script>
    function hideDiv() {
        document.getElementById("detailsDiv").style.display = "block";
    }
</script>
<?php
    echo "<table><tr><td><a href='#' onclick='hideDiv();'>View Details</a></td></tr></table>";

    echo "<div id='detailsDiv' style='display: none;'>";
    echo "<h1>Hello World!!</h1>";
    echo "</div>";
?>