jquery while php show hide

Question

<div class="commentfull">
    <?php $comment=m ysqli_query($connect, "SELECT * FROM comment WHERE product = '$p'"); $user=m ysqli_query($connect, "SELECT * FROM user"); $datauser=m ysqli_fetch_assoc($user); while ($datacomment=m ysqli_fetch_assoc($comment)) { ?>
    <div class="commentcontent">
        <div class="commentfill">
            <?php echo $datacomment[ 'comment']; ?>
        </div>
        <ul>
            <li class="commenttime">
                <p>
                    <?php echo $datacomment[ 'time']; ?>
                </p>
            </li>
            <li class="commentreply"><span id="triggerreply">Reply</span></li>
        </ul>
    </div>
    <div class="commentformreply">
        <form method="POST" id="myform" action="<?php echo $base; ?>/config/addcomment.php">
            <input type="hidden" name="p" value="<?php echo $p; ?>" />
            <textarea class="commentarea" name="comment" placeholder="Your comment"></textarea><span class="commentclose">cancel</span>
        </form>
    </div>
    <?php } ?>

jquery :

$("#triggerreply").click(function() {
    $(".commentformreply").slideDown("medium");
});
$(".commentclose").click(function() {
    $(".commentformreply").slideUp("medium");
});

css :

.commentformreply {display:none; }

so, when i clicked 'reply' its show every commentformreply, i just want one of them appearing on its place where i clicked, how to doing this?

You need to consider appending the primary key of table comments to the Div ID. for identification sakes. For this purpose alone KAD s solution is sufficient. — Riddler
– Riddler, Commented Jun 26, 2015 at 6:56
i just edit my question, i just try KAD solution, but its only the first one, how to doing for each of them? — Ching Ching
– Ching Ching, Commented Jun 26, 2015 at 7:01
You know it would be better if you give us the HTML generated rather than the PHP. Try going to view page source and post it into jsfiddle.net and post it here. — Riddler
– Riddler, Commented Jun 26, 2015 at 7:05

kapantzak · Accepted Answer · 2015-06-26 07:01:23Z

1

Use closest() to select the parent .commentcontent element and then with next(), select the next div (which is .commentformreply element):

NOTE

As KAD said, you must not produce more that one element with the same id. Instead, add a class (that's what they are for!)

$(".triggerreply").click(function(){
    $(this).closest('.commentcontent').next().slideDown("medium");
});
$(".commentclose").click(function(){
    $(this).closest('.commentformreply').slideUp("medium");   
});

EXAMPLE (WORKING)

Take a look at the following example. It works for multiple blocks of divs.

$(".triggerreply").click(function(){
    $(this).closest('.commentcontent').next().slideDown("medium");
});
$(".commentclose").click(function(){
    $(this).closest('.commentformreply').slideUp("medium");   
});

.commentformreply { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="commentfull">    
        <div class="commentcontent">
            <div class="commentfill">Comment</div>
            <ul>
                <li class="commenttime"><p>Time</p></li>
                <li class="commentreply"><span class="triggerreply">Reply</span></li>
            </ul>
        </div>
        <div class="commentformreply">
            <form method="POST" id="myform" action="../config/addcomment.php">
                <input type="hidden" name="p" value="value>" />
                <textarea class="commentarea" name="comment" placeholder="Your comment"></textarea><span class="commentclose">cancel</span>    
            </form>
        </div>
  <div class="commentfull">    
        <div class="commentcontent">
            <div class="commentfill">Comment</div>
            <ul>
                <li class="commenttime"><p>Time</p></li>
                <li class="commentreply"><span class="triggerreply">Reply</span></li>
            </ul>
        </div>
        <div class="commentformreply">
            <form method="POST" id="myform" action="../config/addcomment.php">
                <input type="hidden" name="p" value="value>" />
                <textarea class="commentarea" name="comment" placeholder="Your comment"></textarea><span class="commentclose">cancel</span>    
            </form>
        </div>
</div>

edited Jun 26, 2015 at 7:01

answered Jun 26, 2015 at 6:43

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

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

2 Comments

Ching Ching Over a year ago

thanks kapantzak, but its only working on first one. how to doing for each of them? my css : .commentformreply : display:none;

Ching Ching Over a year ago

thank you so much kapantzak, so, i have to replace id into class. you are awesome!!!

KAD · Accepted Answer · 2015-06-26 06:47:40Z

0

You cannot access triggerreply as an Id of the element since when the html is loaded dynamically, the ID is gonna conflict with other elements of the same ID since you are loading your data in a loop.

So its best used as a class then called as follows :

$(".triggerreply").click(function(){
    $(this).closest('.commentcontent').next().slideDown("medium");
});
$(".commentclose").click(function(){
    $(this).closest('.commentformreply').slideUp("medium");   
});

answered Jun 26, 2015 at 6:47

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Collectives™ on Stack Overflow

jquery while php show hide

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related