CODEWITHSUNDEEP
javascriptphpjqueryhtml
Alexander Omoruyi
Alexander Omoruyi

Reputation: 348

How to set javascript to hide div by default in a while loop

i have a JavaScript to toggle show/hide a div class. The content of the div and the button to activate the toggle function is in a while loop. at first i used "div id" in my JavaScript but that didn't work, i decided to use "div class" instead which worked just fine. However I've not been successful in hiding the div by default, I've tried using display:none and visibility:hidden in my CSS, but that doesn't work at all (content is always hidden). How can i make the div hidden by default using my current JavaScript below:

JavaScript

<script language="JavaScript">
$(document).ready(function(){
$(".Comment").click(function(){
$(this).next(".reply").slideToggle("slow");                              
});                        
});

</script>

file.php

<?php
.......................
  while($obj = $stmt->fetch())
    {

      $username = $obj['user_name'];
      $comment = $obj['comment'];
      $id = $obj['id'];
      $userimage = $obj['user_image'];

    echo '<div class="comment-item">';
    echo '<div class="comment-avatar">';
    echo '<img src="user/user_images/'.$userimage.'" alt="avatar">';
    echo '</div>';
    echo '<div class="comment-post">';
    echo '<span style="font-weight:bold;">'.$username.'&nbsp&nbspsaid...
    </span>';
    echo '<p>'.$comment.'</p>';
    echo ' <div class="Comment"><input type="button"value="Reply" ></div>';
    echo '<div class="reply">';
    echo '<form action="" method="post" class="reply"
    enctype="multipart/form- data">';
    echo '<textarea rows="4"  name="txtcomment" style="float:right;resize:  
    none;margin-top:5px;" cols="50" >';
    echo '</textarea>';
    echo '</form>';
    echo '</div>';

    echo '</div>';
    echo '</div>';  

    echo '</div>';

        }
    ?>

Upvotes: 0

Views: 483

Answers (1)

n099y
n099y

Reputation: 414

This should work. Here is the FIDDLE

<div class="comment">Show/Hide reply.</div>
<div class="reply">A reply from someone.</div>

<script language="JavaScript">
$(document).ready(function(){
    $(".reply").hide(); 
    $(".comment").click(function(){
      $(this).next(".reply").slideToggle("slow");                              
    });                        
}); 
</script>

Things you should be aware of:

Javascript is case-sensitive, so make sure that C is correct in Comment class and the same in the document and the javascript.

You cannot hide in the CSS, you have to hide it in a style like below, otherwise the CSS overrides the javascript. You can thou change the class to hide if you want to do it that way.

<div class="reply" style="display:none;">A reply from someone.</div>

I think I covered it all now.

Upvotes: 2

Related Questions