Collapse on bootstrap with swapped signal

1

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>
    
asked by anonymous 29.06.2018 / 06:40

1 answer

3

Add in your CSS:

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

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

And remove:

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

And change:

.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><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>
    
29.06.2018 / 07:00