Question

I’m modifying a Flask MiniTwit example to implement a twitter-like message reply system, where each message has a ‘reply’ button. I’d like to expand a new div to display replies as well as an input area for when a ‘reply’ button for a specified message was clicked. But I don’t know how to define the ‘reply’ button in my jinja template.

Currently my code is like the following:

<a href=# data-messageid="{{message._id}}" id="reply">
Reply
</a>

So how would I differentiate each ‘reply’ hyperlink button in my jQuery code?

Answer 1

<div class="replymessage" id="message{{message._id}}">content</div>
<a href="#message{{message._id}}" class="reply">Reply</a>


$('.reply').click( function () {
    var item =  $(this).attr('href');
    $(item).slideToggle(300);
 });

Demo Here

Basically you use the dynamic id number in the href of the button, then in the ID for the corresponding div. This way when you click a link with the href, the div with the same ID opens.