Collapse in bootstrap with signal exchanged

Question

I’m having a hard time correctly flag the icon (The "+" of the right corner, signaling the expand and the "-" signaling the contract) when Collapse is compressed and when it is open.

He gets mixed up first time which is executed and then remains changed the 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>
    <script src="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>

Answer 1

Add to your CSS:

.sessao-titulos[aria-expanded='true']:after{
    content: "-";
}

.sessao-titulos[aria-expanded='false']:after{
    content: "+";
}

And remove:

.sessao-titulos.collapsed:after {
    content: "-";   
}

And alter:

.sessao-titulos:after {
    content: "";   
    float: right;
    font-weight: bold;       
    font-size: 16px; 
}

Example:

.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[aria-expanded='true']:after{
    content: "-";
}

.sessao-titulos[aria-expanded='false']:after{
    content: "+";
}

.sessao-titulos:after {
    content: "";   
    float: right;
    font-weight: bold;       
    font-size: 16px; 
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="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>