I am trying to create an expandable list with toggle icons, and I want the icon to be centered in line in mobile view every time the text wraps. I have tried multiple methods that I found through my search but none of them seem to be working.
In Bootstrap:
.panel-default {
border-color: #ddd;
}
.panel-default > .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ddd;
}
CSS:
.panel-heading {position: relative;}
.panel-heading [data-toggle="collapse"]:after {font-family:'FontAwesome'; content:"\f056"; float:right; color:#504371; font-size:18px;}
.panel-heading [data-toggle="collapse"].collapsed:after {content: "\f055";}
.panel-title a {display: block; padding: 10px 15px; margin: -10px -15px;}
.panel-title a:focus {text-decoration:none;}
.panel-body h3 {text-decoration:underline;}
.panel-options {position: absolute; right: 15px; top: 10px;}
h1.panel-title {font-size:18px;}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="panel panel-default">
<div class="panel-heading">
<li>
<a class="collapsed" data-toggle="collapse" href="#q1" aria-expanded="false">
How can I get a coach ticket/invoice after booking a seat online?
</a>
</li>
</div>
<div id="q1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>After buying online f you do not receive the email, you may login to membership => view booking history => select departure date, click invoice to print it out.</span> You are encouraged to print out the order summary to speed up check-in beside showing your ID. Please follow the instruction in the order summary especially about quoting the boarding code to check in into certain coach companies or waiting for the next email in the next working day to obtain an actual Ticket Number to check in into certain coach companies. </p>
</div>
</div>
</div>