javascript on click show/hide content

Question

I'm trying to develop a private message system using php/mysql.

I've got a database set up like this:

CREATE TABLE IF NOT EXISTS `messages` (
  `messageID` int(25) NOT NULL AUTO_INCREMENT,
  `msgTo` varchar(24) NOT NULL,
  `msgFrom` varchar(24) NOT NULL,
  `subject` varchar(100) NOT NULL,
  `message` text NOT NULL,
  `sendTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`messageID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

I list the messages sent to a specific username as follows:

<?php               
 $query = "SELECT * FROM messages WHERE msgTo = '$username'"; // I know SELECT * should be avoided but there's not many columns here anyway
    $result = mysql_query($query);              
    while($messages = mysql_fetch_array($result)){   ?>         
        <ul class='lbe_list'>
        <li>                    
            <a href=''>             
            <?php
            echo "From: ".$messages['msgFrom']."</a>&nbsp;Subject: ".$messages['subject'];?>
    </li></a></ul>  
    <?php 
}

Which lists the sender and the subject of the message.

However, I want to be able to click the username and subject here, and use JavaScript to expand the window so it will list the message itself below. Like the following:

<a href=''>             
<?php
    echo "From: ".$messages['msgFrom']."</a>&nbsp;Subject: ".$messages['subject'];?>
    </li></a></ul>
<?php 
// on click expand/hide $messages['message'];
?>

Any help will be appreciated

Answer 1

<?php               
 $query = "SELECT * FROM messages WHERE msgTo = '$username'"; // I know SELECT * should be avoided but there's not many columns here anyway
    $result = mysql_query($query);
    $m_no=0;
    while($messages = mysql_fetch_array($result))
    {
        $m_no++;
?>         
        <ul class='lbe_list'>
        <li>                    
            <a href=''>             
            <?php
                echo "<span id='$m_no' onclick=\"document.getElementById('body_".$m_no."').style.display=(document.getElementById('body_".$m_no."').style.display=='none'? 'block': 'none')\">"."From: ".$messages['msgFrom']."</span></a>&nbsp;Subject: ".$messages['subject'];
                echo "<div id='body_".$m_no."' style=\"display:none; border:2px solid green;\">".htmlspecialchars($messages['message'])."</div>";
            ?>
    </li></a></ul>  
<?php 
    }
?>

fiddle here

Answer 2

for one, this is not valid html structure

<ul class='lbe_list'>
 - <li>                    
 - - <a href=''>
 - - </a>
 - </li>
 - </a>
</ul>

The basic idea to solve this problem, is to name the element that contains whatever you want to show with a id="" and hiding it with style="display:none", and then attach a onclick handler to that which should display it. In its most basic form:

<ul class='lbe_list'>
<?php while($messages = mysql_fetch_array($result)){ ?>         
    <li>                    
    <a href="#" onclick="document.getElementById('message-<?php echo $messages['messageID']; ?>').style.display='block'">
        <?php echo "From: ".$messages['msgFrom']."&nbsp;Subject: ".$messages['subject'];?>
    </a> 
    </li>
    <li id="message-<?php echo $messages['messageID']; ?>" style="display:none">
        <?php echo $messages['message']; ?> 
    </li>
<?php } ?>
</ul> 

Answer 3

You will need to use javascript, preferably jQuery, to do that. Take a look at

http://api.jquery.com/show/

and

http://api.jquery.com/hide/

or

http://api.jquery.com/toggle/

to see the proper usage