I am trying to hide or show the div based on the div id from the php function. I am not able to make it work, please help me.

Javascript:

<script>
showOrHide(id) {
    var elem=getElementById(id);
    if(elem.style.visibility="hidden")
        elem.style.visibility="visible";
    else
        elem.style.visibility="hidden";
}
</script>

PHP Script:

<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid) {
?>
    <a href="javascript:showOrHide(<?php echo $divid; ?>)">More links</a>
    <div id="<?php echo $divid ?>" style="visibility:hidden;">
    </div>
<?php } ?>

I am trying to hide or show the div based on the div id from the php function. I am not able to make it work, please help me.

Javascript:

<script>
showOrHide(id) {
    var elem=getElementById(id);
    if(elem.style.visibility="hidden")
        elem.style.visibility="visible";
    else
        elem.style.visibility="hidden";
}
</script>

PHP Script:

<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid) {
?>
    <a href="javascript:showOrHide(<?php echo $divid; ?>)">More links</a>
    <div id="<?php echo $divid ?>" style="visibility:hidden;">
    </div>
<?php } ?>

• php
• javascript

• 1 in what way does it not work? most people would jquery to do this – user557846 Commented Apr 9, 2013 at 4:52
• 1 You JavaScript code is syntaxically invalid. jshint. – plalx Commented Apr 9, 2013 at 4:53
• You're missing the closing bracket from the php function, also showOrHide needs to be function showOrHide(id) {} – francisco.preller Commented Apr 9, 2013 at 4:53
• You might want to clean up your JS - using a Linter like jslint. can be useful for doing it on the fly. – Scott Sword Commented Apr 9, 2013 at 4:54

3 Answers 3

Here's a cleaned-up version of your function.

function showOrHide(id) {

  var elem = document.getElementById(id);

  elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}

<script>
function showOrHide(id){
 var elem = getElementById(id);
 if(elem.style.visibility=="hidden"){
  elem.style.visibility="visible";
 } else {
  elem.style.visibility="hidden";
 }
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
<a href="javascript:showOrHide('<?php echo $divid; ?>')">More links</a>
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>

1 - visibility == 'hidden'

2 - missing ; after visibility="visible" and ="hidden"

3 - href="javascript:showOrHide('')" - missing '' inside your javascript function

Try this

 <script>
    function showOrHide(id){
     var elem = document.getElementById(id);

  elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
    }

    </script>
    <?php
    function display_link($link_id,$upvote_array,$downvote_array,$divid)
    {
    ?>
    <a  href="javascript:showOrHide(<?php echo $divid; ?>)">More links</a>
    <div id="<?php echo $divid ?>" style="display:hidden;">
    </div>
    <?php
    }
    ?>