Django database querysets with javascript drop down

Question

Hello i have a FAQ model..and i have crated three FAQs..

html:

<div class="accordion accordion-solid accordion-panel accordion-svg-toggle mb-10">
    <!--begin::Item-->
    {% for i in faqs %}
    <div class="card p-6 header-click" id="header" data-idd="{{ i.id }}">
        <!--begin::Header-->
        <div class="card-header">
            <div class="card-title font-size-h4 text-dark">
                <div class="card-label">{{ i.ques }}</div>
                <span class="svg-icon svg-icon-primary">
                    <!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Angle-double-right.svg-->
                    <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <polygon points="0 0 24 0 24 24 0 24" />
                            <path
                                d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                fill="#000000" fill-rule="nonzero" />
                            <path
                                d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                fill="#000000" fill-rule="nonzero" opacity="0.3"
                                transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999)" />
                        </g>
                    </svg>
                    <!--end::Svg Icon-->
                </span>
            </div>
        </div>
        <!--end::Header-->
        <!--begin::Body-->
        <div class="hide-ans" id="{{ i.id }}" style="display: none;">
            <div class="card-body pt-3 font-size-h6 font-weight-normal text-dark-50" data-id="{{ i.id }}">{{ i.ans }}</div>
        </div>
        <!--end::Body-->
    </div>
    {% endfor %}
    <!--end::Item-->
</div>

now this is showing me my three faqs which is perfect but the problem is i want them to hide the answers which i did with display =none property...and i have created a javascript that will act on click event and will make all displays to block so that the ans will be shown but when i click any of the question then every other querysets display property gets blocl too as a result every ans is visible by ckicking any ques

js:

<script>
var header_click = document.getElementsByClassName("header-click")
var hide_ans = document.getElementsByClassName('hide-ans')

for (i = 0; i < header_click.length; i++) {
    header_click[i].addEventListener('click', function() {
        for (j = 0; j < hide_ans.length; j++) {
            if (hide_ans[j].style.display === "none") {
                hide_ans[j].style.display = "block";
            } else {
                hide_ans[j].style.display = "none";
            }
        }
    })
}

but when i click any of them then every display is shown

Swati · Accepted Answer · 2021-07-04 12:34:04Z

In your code data-idd="{{ i.id }}" and id="{{ i.id }}" have same value so you can use this to open required divs . So, on click of header-click you can first hide all other divs and then use this.getAttribute("data-idd") to get id value and then using this show div where this matches .

Demo Code :

var header_click = document.getElementsByClassName("header-click")
for (i = 0; i < header_click.length; i++) {
  header_click[i].addEventListener('click', function(e) {
    //hide all hide-ans divs....
    document.querySelectorAll('.hide-ans').forEach(function(el) {
      el.style.display = 'none';
    });
    //show div where id = data-idd
    document.getElementById(this.getAttribute("data-idd")).style.display = 'block';
  })
}

<div class="accordion accordion-solid accordion-panel accordion-svg-toggle mb-10">
  <div class="card p-6 header-click" id="header" data-idd="1">
    <div class="card-header">
      <div class="card-title font-size-h4 text-dark">
        <div class="card-label">1</div>
        <span class="svg-icon svg-icon-primary">
                    <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <polygon points="0 0 24 0 24 24 0 24" />
                            <path
                                d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                fill="#000000" fill-rule="nonzero" />
                            <path
                                d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                fill="#000000" fill-rule="nonzero" opacity="0.3"
                                transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999)" />
                        </g>
                    </svg>
                    <!--end::Svg Icon-->
                </span>
      </div>
    </div>
    <div class="hide-ans" id="1" style="display: none;">
      <div class="card-body pt-3 font-size-h6 font-weight-normal text-dark-50" data-id="1">Abcd</div>
    </div>
  </div>
  <div class="card p-6 header-click" id="header" data-idd="2">
    <div class="card-header">
      <div class="card-title font-size-h4 text-dark">
        <div class="card-label">2</div>
        <span class="svg-icon svg-icon-primary">
                    <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <polygon points="0 0 24 0 24 24 0 24" />
                            <path
                                d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                fill="#000000" fill-rule="nonzero" />
                            <path
                                d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                fill="#000000" fill-rule="nonzero" opacity="0.3"
                                transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999)" />
                        </g>
                    </svg>
                 
                </span>
      </div>
    </div>
    <div class="hide-ans" id="2" style="display: none;">
      <div class="card-body pt-3 font-size-h6 font-weight-normal text-dark-50" data-id="2">Abcd2</div>
    </div>
  </div>

</div>

Collectives™ on Stack Overflow

Django database querysets with javascript drop down

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related