asked on

bootstrap 4 , panel , toggle icon on collapse/expand

I have added a bootstrap 4 panel. how can I add a right arrow after the anchor tag , when it is collapsed and add a down arrow on expand?

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>

Chinmay Patel

Hi Mikha,

Do you want to give this effect to a single panel? or there are more?
If there are more then I think accordion will be an appropriate component.

Please check this demo: https://www.jquery-az.com/boots/demo.php?ex=53.0_5 Is that something you want?

Regards,
Chinmay.

mikha

ASKER

@chinmay- thanks. Yes this is similar. But I would like to keep more than open/expanded at a time.
Also, in the demo I see , it uses glyphicons, is that something included in bootstrap css, how hard it would be to swap that image with something else ?

Chinmay Patel

It is pretty easy. Check out font awesome. I am sorry I just steeped out and will be back in couple of hours. So can't post the other code.

lenamtl

Hi,

Panel disappear in Bootstrap 4
Check migration documentation
https://getbootstrap.com/docs/4.0/migration/#panels-thumbnails-and-wells

This was replaced by card
See some examples
https://disjfa.github.io/bootstrap-tricks/card-collapse-tricks/

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.