Looking to incorporate a Twitter 'share' button within each accordion item in Bootstrap 4 when expanded.
Currently, I can get the button to show up outside of the accordion but not inside.
I suspect that the issue lies with the class=="collapse" on the accordion <div>. When I remove it, the button displays correctly. You can see this demonstrated in my code where I removed class="collapse" from one accordion item and it worked.
Here is my code snippet below, along with a link to a demonstration.
I have annotated the code to indicate where the button functions properly and where it doesn't.
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div class="row">
<div class="col-md-12">
<div id="accordion" role="tablist">
<!-- Button works here outside accordion -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #share</a>
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4367" href="#4367" aria-expanded="false" aria-controls="4367" class="collapsed">
item 1
</a>
</p>
</div>
<div id="4367" class="" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4367</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">fre</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- Button works here when class="collapse" removed from parent div -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #share</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4368" href="#4368" aria-expanded="false" aria-controls="4368" class="collapsed">
item 2
</a>
</p>
</div>
<div id="4368" class="collapse" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4368</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">ita</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- Button does not work here -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #share</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Would appreciate any guidance or suggestions. Thank you!