I have data in different bootstrap accordion, in some accordion i want to have buttons and dropdowns, the accordion is divided into two columns.

# 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="")
    

This is my model

<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>

FOR BUTTONS
this is my html, i want the buttons in the first column (“col-content”), once the button is clicked then only the data of second column (“col-data”) is visible.

FOR DROPDOWNS
In some accordion i wish to have dropdowns, all the data of the drowpdown will be fetched from the database.Once the user clicks on any option it fetches its data.

“I am a begineer, my doubt might be weird, but please help”