PHP Javascript Show/Hide button not working

Question

This is my php code:

<?php
require('connection.php');
$query="select title,content from blogs";
echo '<html><head>';
echo '<link rel="stylesheet" href="blog.css" />';
echo '<script type="text/javascript" src="blog.js"></script></head><body>';
$i=0;
if($result=$mysqli->query($query))
{
while($news=$result->fetch_row())
{
echo "<br /><br /><strong>". $news[0]."</strong><br /><br />";
if(strlen($news[1])>60)
{
    $d=0;
    $content=explode(" ",$news[1]);
    foreach($content as $c)
    {
        if($d<=60)
        {
            echo $c." ";
            $d++;
        }
        else
        {
            if($d==61)
            {

                echo "<div id=a$i style='visibility:hidden'>";
                echo "<a href='#' onclick='toggle(a".$i.")' style='visibility:visible'>Show/Hide</a>";

                $i++;

                $d++;
            }
            echo $c." ";
            $d++;
            if($d==count($content)+1)
            {
                echo "</div>";
            }

        }


    }
}
else
echo $news[1]."<br /><br />";

}
$result->close();
echo "</body></html>";

}
?>

This is my JavaScript code:

function toggle(id)
{

    //document.getElementById('mcontent').value=x++;
    //if(x%2==0)
    document.getElementById(id).style.visibility="visible";
    //else
    //document.getElementById('mcontent').style.visibility="hidden";
};

The show hide button is not working.My strategy is to limit text which contains more than 60 words with the show hide button.Once the user clicks the button the hidden div becomes visible and that contains the extra text(namely the text after 60 word count).Div element should always start with a letter so I have append letter 'a' before that.Please help me fix this.

Note: Don't need Jquery solutions or suggestion.I need only to debug the above code.

I don't get any error when I click the show/hide button the page reloads but doesn't show the remaining text.I can't provide JSFiddle because mysql fetches the data. — user1633170
– user1633170, Commented Sep 12, 2012 at 8:09
When you have this kind of bug, the first thing to do is to remove the PHP part and use fake hard-coded data. — Rodolphe
– Rodolphe, Commented Sep 12, 2012 at 8:14

Denys Séguret · Accepted Answer · 2012-09-12 08:08:26Z

5

You're missing quotes in your call to toggle.

This would call toggle(a0) instead of toggle("a0").

Try this :

echo "<a href='#' onclick=\"toggle('a".$i."')\" style='visibility:visible'>Show/Hide</a>";

As I always find painful to deal with this level of imbricated quotes, I prefer to avoid inlined javascript in PHP. You can defer the addition of handlers even without jQuery, using document.getElementById('...').onclick=....

answered Sep 12, 2012 at 8:08

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nnnnnn · Accepted Answer · 2012-09-12 08:10:57Z

2

The onclick attribute on this line:

echo "<a href='#' onclick='toggle(a".$i.")' style='visibility:visible'>Show/Hide</a>";

...needs to have double-quotes around the parameter to toggle() so that the browser receives it as onclick='toggle("a1")':

echo "<a href='#' onclick='toggle(\"a".$i."\")' style='visibility:visible'>Show/Hide</a>";

answered Sep 12, 2012 at 8:10

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

C.. · Accepted Answer · 2012-09-12 08:09:52Z

1

echo "<div id='a" . $i . "' style='visibility:hidden'>";

answered Sep 12, 2012 at 8:09

C..

8024 silver badges16 bronze badges

Comments

Rodolphe · Accepted Answer · 2012-09-12 08:10:24Z

1

The parameter in toggle(a".$i.") is a string. You should add string delimiters. And also, you should add quotes to your attributes in yout HTML tags:

echo '<div id="' . a$i . '" style="visibility:hidden">';

answered Sep 12, 2012 at 8:10

Rodolphe

1,7611 gold badge15 silver badges34 bronze badges

Collectives™ on Stack Overflow

PHP Javascript Show/Hide button not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related