I'm having a hard time correctly signaling the icon (the "+" in the right corner, signaling the expand and the "-" signaling it to collapse) when the collapse is compressed and when it is open.
It gets changed, buga in the first time that runs and then remains changed collapse .
.sessao-titulos {
display: block;
width: 100%;
color: rgb(0, 0, 0);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:after {
content: "+";
float: right;
font-weight: bold;
font-size: 16px;
}
.sessao-titulos.collapsed:after {
content: "-";
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Título aqui
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">A unidade possui Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Selecione</option>
<option value="">Sim</option>
<option value="">Não</option>
</select>
</div>
</div>
</div>
</div>