CODEWITHSUNDEEP
javascripthtmljquerycsstwitter-bootstrap
Yohav Rn
Yohav Rn

Reputation: 209

toggle-data=collapse expend but does not close

I know this question has been asked several time but every answer I can find does not work. The expandable row does expand but does not close when reclicked on.

Here is my code:

 <tr class="accordion-toggle" id="myGroup">
  <td><button id="{{other_profile.user.id}}b" data-toggle="collapse" data-target="#{{other_profile.user.id}}"class="btn-accordion" aria-expanded="false" data-parent="#myGroup">+</button></td>
  <td data-label="Name">{{ other_profile.user.first_name }}</td>
  <td data-label="Last Name">{{ other_profile.user.last_name }}</td>
  <td data-label="Circle">{{ met_profile.circle.name }}</td>
  <td data-label="Last Met">{{ met_profile.last_met.date }}</td>
 </tr>
 <tr style="border-bottom: 1px solid #D3D3D3;">
  <td colspan="6" class="hiddenRow" style="padding: 0px;">
   <div class="accordian-body collapse" id="{{other_profile.user.id}}">
    <div class="expanded-row">

      (content of the expanded row)

    </div>
   </div>
  </td>
 </tr>

My Javascript

{% block javascript %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    jQuery('button').click( function(e) {
     jQuery('.collapse').collapse('hide');
    });
  </script>
  <script>
    $(document).ready(function() {
      var queryString = window.location.hash;
      $(queryString).trigger('click');
    });
  </script>
{% endblock %}

(I also have the link https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" in the base.html of my code (using Django)).

If I remove the bootstrap script, it works but then the 2 others functionalities dont work (close expanded row when opening another and open a row when I click on a button from another page)

Any help is welcome, thank you.

Upvotes: 0

Views: 353

Answers (1)

Ab_Fredo
Ab_Fredo

Reputation: 106

.accordian-body {
  display: none;
}
<tr class="accordion-toggle" id="myGroup">
  <td><button data-target="#{{other_profile.user.id}}"class="btn-accordion"
              onclick="openDiv('1')">+</button></td>
  <td data-label="Name">{{ other_profile.user.first_name }}</td>
  <td data-label="Last Name">{{ other_profile.user.last_name }}</td>
  <td data-label="Circle">{{ met_profile.circle.name }}</td>
  <td data-label="Last Met">{{ met_profile.last_met.date }}</td>
 </tr>
 <tr style="border-bottom: 1px solid #D3D3D3;">
  <td colspan="6" class="hiddenRow" style="padding: 0px;">
   <div class="accordian-body collapse" id="1">
    <div class="expanded-row">

      (content of the expanded row)

    </div>
   </div>
  </td>
 </tr>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
        function openDiv(x) {
            $('#' + x).toggle();
        }
    </script>

Upvotes: 1

Related Questions