Click function showing div elements when not clicked out

Question

I have an admin panel that I am creating. I have a left panel section and then the right side which shows the div when the panel button is clicked. I created a fiddle to show what it looks like and to help me explain this...

https://jsfiddle.net/jq8c51c9/

In the Fiddle it works just like it should, but I took out all of my php. The problem is around the Announcements div, it shows the div for the League Dues under it. Also once you click on announcements and then click on another panel button, if I click on Announcements again the only thing that will show up is this..

Announcements Current Announcements
League Dues

Again this is NOT doing this in the Fiddle.

Here is the full code for the area that the issue resides in. I have been stuck on this forever and cannot figure out why I am having difficulties with only these two divs.

Does anyone see what it is that I am doing wrong?

Announcements

try {
    //Prepare
     $con = mysqli_connect("localhost", "", "", "");
     if ($user_stmt = $con->prepare("SELECT `id` FROM users")) {

        $user_stmt->execute();
        $user_stmt->bind_result($user_id); 

        if (!$user_stmt) {
            throw new Exception($con->error);
        }
        $user_stmt->store_result();
         $user_result = array();
                 //while ($user_row = $user_stmt->fetch()) {
?>               
     <div class="announcement_success"></div>
            <p>Add New Announcement</p>
                <form action="" method="POST" id="insert_announcements">
                <input type="hidden" value="<?php echo $userid; ?>" id="approved_id" name="user_id" />
                    <textarea rows="4" cols="50" id="announcement_message" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
                    <label for="contactButton">
                        <button type="button" class="contactButton" id="submit_announcement">Add Announcement</button>
                    </label>
                </form>
<?php

    if ($announcements_stmt = $con->prepare("SELECT * FROM announcements")) {

        $announcements_stmt->execute();
        $announcements_stmt->bind_result($announcements_id, $announcements_user_id, $announcements_messages, $announcements_date); 

        if (!$announcements_stmt) {
            throw new Exception($con->error);
        }
        $announcements_stmt->store_result();
         $announcements_result = array();

?>

            Current Announcements
            <table>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Message</th>
                    <th>Date</th>
                </tr>   
<?php
        while ($row = $stmt->fetch()) {
?>
                <tr>
                    <td><?php echo $announcements_id; ?></td>
                    <td><?php echo $announcements_username; ?></td>
                    <td><?php echo $announcements_messages; ?></td>
                    <td><?php echo $announcements_date; ?></td>
                </tr>   
            </table>
<?php
        }  
    }
}
}
    catch (Exception $e)
    {
        echo "Error: " . $e->getMessage();
    }   
?>          
            </div>
            <div id='dues'>League Dues</div>
        </div>

Answer 1

You have an error when building the announcement-table. The closing </table> tag is inside the while loop, so the html will be screwed up, making everything after the closed table disappear.

So change the while loop to:

....
<?php
    while ($row = $stmt->fetch()) {
?>
            <tr>
                <td><?php echo $announcements_id; ?></td>
                <td><?php echo $announcements_username; ?></td>
                <td><?php echo $announcements_messages; ?></td>
                <td><?php echo $announcements_date; ?></td>
            </tr>   
<?php
    }
?>
    </table>
<?php
....

Anyway, I recommend to build your html first in a variable and echo it out later alltogether. That makes cleaner code and reduces risk of inconsitency of html tags. When using with HEREDOC you even don't have to bother about quotes.

In your case that could for example look like that:

<?php

$table_head = <<<EOT 
             <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Message</th>
                <th>Date</th>
            </tr>
EOT;

$table_content = "";

while ($row = $stmt->fetch()) {
    $table_content.= <<<EOT
            <tr>
                <td>$announcements_id</td>
                <td>$announcements_username</td>
                <td>$announcements_messages</td>
                <td>$announcements_date</td>
            </tr>   
EOT;

}

$announcement_table = "<table>".$table_head.$table_content."</table>";

echo $announcement_table;