Как динамически генерировать кнопки и выпадающие окна из базы данных для выполнения какого-либо действия? (django)

У меня есть данные в разных аккордеонах bootstrap, в некоторых аккордеонах я хочу иметь кнопки и выпадающие окна, аккордеон разделен на две колонки.

# Create your models here.
class CaseStudy_List(models.Model):
    CaseStudy_id = models.IntegerField(primary_key=True)
    title = models.CharField(max_length=255)
    
    def __str__(self):
        return self.title

class CaseStudy_Parts(models.Model):   #accordians
    case_study = models.ForeignKey(CaseStudy_List, on_delete=models.CASCADE)
    CaseStudy_part_id = models.AutoField(primary_key=True)
    CaseStudy_order = models.IntegerField(default="")
    CaseStudy_title_accordian = models.CharField(max_length=255)
    
    
    def __str__(self):
        return self.CaseStudy_title_accordian

class CaseStudy_Content(models.Model):   #column 1 - text area
    case_study_part = models.ForeignKey(CaseStudy_Parts, on_delete=models.CASCADE,  null=True)
    content_title = models.CharField(max_length=255, default="")
    content_text = models.TextField(blank=True)
    content_link = models.TextField(blank=True)
    
    def __str__(self):
        return self.content_title

class CaseStudy_Media(models.Model):    #column 2 - Media Area
    case_study_part = models.ForeignKey(CaseStudy_Parts, on_delete=models.CASCADE,  null=True)
    # case_study = models.ForeignKey(CaseStudy_List, on_delete=models.CASCADE)
    content_img = models.ImageField(upload_to='casestudy/images', default="")
    

Это моя модель

<div class="page-layout">
    <div class="accordion" id="accordionPanelsStayOpenExample">
      {% for part_data in parts_data %}
      <div class="accordion-item">
        <h6 class="accordion-header" id="heading{{ part_data.part.CaseStudy_part_id  }}">
          <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button"
            data-bs-toggle="collapse" data-bs-target="#collapse{{ part_data.part.CaseStudy_part_id  }}"
            aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
            aria-controls="collapse{{ part_data.part.CaseStudy_part_id  }}">
            {{ part_data.part.CaseStudy_title_accordian }}
          </button>
        </h6>
        <!-- <div id="panelsStayOpen-{{ part_data.part.CaseStudy_part_id  }}" class="accordion-collapse collapse show"> -->
        <div id="collapse{{ part_data.part.CaseStudy_part_id  }}"
          class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
          aria-labelledby="heading{{ part_data.part.CaseStudy_part_id  }}">
          <div class="accordion-body">
            <div class="container-area">
              <div class="col-content">
                <div class='introduction-content'>
                  <!-- <h3>CASESTUDY ID - {{casestudy_object.CaseStudy_id}} </h3><br>
                  
                  <h3>TITLE - {{ casestudy_object.title }} </h3> <br> -->

                  {% for content in part_data.content %}
                  <h4> {{ content.content_text|safe|linebreaks }}</h4>
                  {% endfor %}
                </div>
              </div>
              <div class="col-data">

                {% for media in part_data.media %}
                <img  src="{{media.content_img.url}}" >
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {%endfor%}
    </div>
  </div>

ДЛЯ КНОПОК Это мой html, я хочу, чтобы кнопки в первом столбце ("col-content"), когда кнопка нажата, тогда только данные второго столбца ("col-data") видны.

ДЛЯ ВЫПАДАЮЩИХ ОКОН В некоторых аккордеонах я хочу иметь выпадающие окна, все данные которых будут браться из базы данных. Как только пользователь нажимает на любую опцию, он берет ее данные.

"Я начинающий, мои сомнения могут быть странными, но, пожалуйста, помогите"

Вернуться на верх