Блог

Главная - Вопросы по программированию - Закрываемая кнопка начальной загрузки Django

Закрываемая кнопка начальной загрузки Django

#python #html #django #bootstrap-4

#python #HTML #django #bootstrap-4

Вопрос:

Я пытаюсь создать ленту новостей в социальных сетях с сообщениями, но я не хочу показывать комментарии, только если пользователь нажимает кнопку «Показать комментарии». Проблема в том, что когда я нажимаю кнопку одного сообщения, все сообщения расширяют комментарии. Я действительно не знаю, как это решить…

  {% for post in posts %}
<div class="container">
    <div class="row">
        <div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
            <div class="[ panel panel-default ] panel-google-plus">


                <div class="panel-heading">
                    <img class="[ img-circle pull-left ]" width="50" height="50" src="{{post.author.profile.image.url}}"  alt="Mouse0270" />
                    <h3 class="author">{{post.author}}</h3>
                    <h5><span>Shared publicly</span> - <span><a href="{% url 'post-detail' post.id %}"> {{post.date_posted}} </a></span> </h5><br>

                </div>
                <div class="panel-body">
                    {% if user == post.author %}
                    <a class="text-right" href="{% url 'post-update' post.id %}"><p>Update</a>
                    <a class="text-danger text-right" href="{% url 'post-delete' post.id %}">Delete post</a>

                    {% endif %}
                    <p>{{post.content}}</p>
                    {% if post.image %}
                    <img src ="{{post.image.url}}" width="300" height="300" border="0" class="img-thumbnail">
                    {% endif %}
                    {% if post.video %}
                    <video width="250"  controls >
                    <source src="{{post.video.url}}" type="video/mp4" >
                    </video>
                    {% endif %}

                </div>
                <br/>
                    <div class="container" >
                                <a href="{% url 'add-comment' post.id %}"><button class="btn btn-primary">Add comment</button></a>
                    </div>
                <br>


                    <button type="button" class="btn btn-danger btn-block" data-toggle="collapse" data-target="#demo">See comments</button>
                    <div id="demo" class="collapse">
                {% for comment in post.comments.all %}

                    <div class="container">

<div class="row">




<div class="col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{comment.author}}</strong> <span class="text-muted">commented at {{comment.created_on|date:"d M g:i a"}}</span>
</div>
<div class="panel-body">

<img class=" img-circle" width="30" height="30" src="{{comment.author.profile.image.url}}">

    {{comment.body}}
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->


    </div>
    </div>
                {% endfor %}
                </div>
            </div>
                </div>



    </div>
        </div>
    </div>
</div>

{% endfor %}

Проблема заключается в сворачиваемой кнопке выше {% для комментариев в post.comments.все %}, но я не знаю, как сделать его уникальным для каждого сообщения.