Using Bootstrap 4.
I'd like to display a Twitter 'share' button within each accordion item when it's expanded.
I can get the button to display outside of the accordion, just not inside.
I think it has something to do with the class=="collapse"
on the accordion <div>
, because when I remove it the button displays. I have demonstrated this in my code, class="collapse"
has been removed from one accordion item and it works.
My code is below, and a link the a fiddle.
I have commented the code showing where the button works and doesn't work.
<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">
<!-- 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">
<!-- 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">
<!-- doesnt 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>
Any advice is appreciated.
What you can do is change the class of the share link.
From
class="twitter-hashtag-button"
toclass="fa fa-twitter"
So the code would look something like this :
After doing this just style the
.fa
class likeThe updated fiddle