Home/ Questions/Q 6074685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T10:24:35+00:00

So, I’m having difficulty trying to append/add a child div to the parent div,

  • 0

So, I’m having difficulty trying to append/add a child div to the parent div, and thought someone out here may know the best way for me to go about this. I have attached my code (without PHP right now, just hard coding text and stuff). But here is what I am trying to do:

  • When a message is posted, you hit the “Reply Button” and a new div will appear underneath containing the reply form.

Right now, here are the issues I know about and can’t get around:

  • The DIV is a class, so when I use jQuery to try to target the DIV it targets everything since it’s no unique.

  • The Reply Button is also a class, so it’s not unique.

Here is a video of it in action: http://tinypic.com/r/2luxwnr/7

<body>
    <div id="content-container">
        <div id="message-viewer">
            <div class="roar">
                <div class="roaractionpanel">
                    <div id="msg-business2"></div>
                    <div class="roartime"><p class="roartime-text">3:26PM</p></div>
                </div>
                <div class="roarcontent">
                    <button type="submit" class="btn-reply"></button>
                    <h5>Test Post</h5><br>
                    <h6>Lord Varlin</h6><br>
                    <h2>Test post... let's see.</h2>
                </div>
            </div>
            <div class="newreply">
                <div class="newreplycontent">
                    <h1>This is where the fields for a new reply will go.</h1>
                </div>
            </div>


            <div class="roar">
                <div class="roaractionpanel">
                    <div id="msg-business2"></div>
                    <div class="roartime"><p class="roartime-text">3:26PM</p></div>
                </div>
                <div class="roarcontent">
                    <button type="submit" class="btn-reply"></button>
                    <h5>Testing another</h5><br>
                    <h6>Lord Varlin</h6><br>
                    <h2>Hmm dee dumm...</h2>
                </div>
            </div>
            <div class="roarreply">
                 <div class="roarreply-marker">
                    <p class="roarreplytime-text">June 26th @ 4:42AM</p>
                 </div>
                 <div class="roarreplycontent">
                    <h9>Testing a reply.  Hmmmm.</h9><br>
                    <h8>Lord Varlin</h8>
                 </div>
            </div>
            <div class="newreply">
                <div class="newreplycontent">
                    <h1>This is where the fields for a new reply will go.</h1>
                </div>
            </div>


            <div class="roar">
                <div class="roaractionpanel">
                    <div id="msg-business2"></div>
                    <div class="roartime"><p class="roartime-    text">3:26PM</p></div>
                </div>
                <div class="roarcontent">
                    <button type="submit" class="btn-reply"></button>
                    <h5>Testing another</h5><br>
                    <h6>Lord Varlin</h6><br>
                    <h2>jQuery, work with me please.</h2>
                </div>
            </div>
            <div class="roarreply">
                 <div class="roarreply-marker">
                    <p class="roarreplytime-text">June 26th @ 4:42AM</p>
                 </div>
                 <div class="roarreplycontent">
                    <h9>Testing a reply.  Hmmmm.</h9><br>
                    <h8>Lord Varlin</h8>
                 </div>
            </div>
            <div class="roarreply">
                 <div class="roarreply-marker">
                    <p class="roarreplytime-text">June 26th @ 4:42AM</p>
                 </div>
                 <div class="roarreplycontent">
                    <h9>Testing a reply.  Hmmmm.</h9><br>
                    <h8>Lord Varlin</h8>
                 </div>
            </div>
            <div class="newreply">
                <div class="newreplycontent">
                    <h1>This is where the fields for a new reply will go.</h1>
                </div>
            </div>
        </div>
    </div>
</body>

JQUERY

$(".btn-reply").click(function() {

    $(".newreply").toggleClass("show");
    return false;

 });

So, I see the flaws, but I just can’t wrap my head around how to pull this off! Any guidance would be awesome! 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try:

    $('.btn-reply').click(function(){
    $(this).parents('.roar').siblings('.newreply').toggleClass('show');
    return false;
});

    However, I agree with Francisc that a better approach would be to modify the HTML and assign a unique id to each message set. That way you can grab the .newreply to show based on a shared unique id which would be agnostic regarding the positioning of the HTML layout.

    E.g.

    <div class="roar" rel="msg0">...</div>
...
<button class="btn-reply" rel="msg0"></button>
...
<div class="newreply" rel="msg0">...</div>
...

    Then your jQuery becomes:

    $('.btn-reply').click(function(){
    var id = $(this).attr('rel');
    var selector = '.newreply[rel=' + id + ']';
    $(selector).toggleClass('show');
    return false;
});
    • 0