How do I click the + switch to - and click the - switch to +

Question

function mostrar(id) {
  if (document.getElementById(id).style.display !== "none") {
    document.getElementById(id).style.display = "none";
    return;
  }
  Array.from(document.getElementsByClassName("hidden")).forEach(
    div => (div.style.display = "none")
  );
  document.getElementById(id).style.display = "block";
}

        .hidden {
  display: none;
}

<div class="row" style="max-width:500px; margin:5 auto;">
    <div class="col-12" style="font-size:18px; font-weight:600;">Rio de Janeiro
    <span style="float:right" onClick="mostrar('mostra-1')">+</span>
    </div>
    <div class="col-12 hidden" id="mostra-1">
    <span style="font-size:16px; color:#03bb85;;">Nome da Cidade</span><br>
    </div>
</div>

Answer 1

An alternative, which I consider simpler, would be to use the HTML element <details> which creates a disclosure box in which the detail information is visible only when the element is switched to an "open" state. Visually it is stylizable, and can become similar to a collapsible or accordion, thus dispensing with JS customization.

The content of <details> is usually displayed on the screen using a trigger, a small triangle that rotates to indicate the open/closed state, with a label next to the triangle. The content of the element <summary> is used as a label.

To meet your requirement to have a custom trigger located right:

• + when the disclosure box is open.
• - when the disclosure box is closed.

<summary> supports the list-style property to customize the driver of <details>.Hide the standard element driver <details> configuring the property list-style of their respective <summary> with the value none.
Use the attribute together open of <details> and the pseudo element ::after to define the new triggers.
To position the trigger on the right side of the container use float: right.

details {
  max-width: 500px;           
  margin: 5 auto;
}

summary {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;               /*Define o ponteiro do mouse como indicador*/
  list-style: none;              /*Oculta o acionador padrão*/
}

summary::after {
  float: right;                 /*Posiciona o acionador personalizado ao lado direito do container*/
  content: "+";                 /*Quando a caixa de divulgação estiver fechada exibe +*/
}

details[open] summary::after {
  float: right;                /*Posiciona o acionador personalizado ao lado direito do container*/
  content: "-";                /*Quando a caixa de divulgação estiver aberta exibe -*/
}

details span {
  font-size: 16px;
  color: #03bb85;
}

<details>
  <summary>Rio de Janeiro</summary>
  <span>Nome da Cidade</span>
</details>

If you want to restrict mouse events to the trigger only, you can use Pointer-Events.

details {
  max-width: 500px;           
  margin: 5 auto;
}

summary {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;               
  list-style: none;              
  pointer-events: none;          /*O elemento deixa de ser alvo de eventos de mouse*/
}

summary::after {
  float: right;                 
  content: "+";                 
  pointer-events: auto;         /*Habilita o elemento a ser alvo de eventos de mouse*/
}

details[open] summary::after {
  float: right;                
  content: "-";                
  pointer-events: auto;        /*Habilita o elemento a ser alvo de eventos de mouse*/
}

details span {
  font-size: 16px;
  color: #03bb85;
}

<details>
  <summary>Rio de Janeiro</summary>
  <span>Nome da Cidade</span>
</details>

Answer 2

There are several points that need to be improved in the code structure of the question. But a way to change the icon, keeping the current code, would be so:

function mostrar(id) {
  
  if (document.getElementById(id).style.display !== "none") {
event.target.innerHTML = "+";
document.getElementById(id).style.display = "none";
return;
  }
  Array.from(document.getElementsByClassName("hidden")).forEach(
div => (div.style.display = "none")
  );
  Array.from(document.getElementsByClassName("controle")).forEach(controle => (controle.innerHTML = "+"));
  event.target.innerHTML = "-";
  document.getElementById(id).style.display = "block";
}

.hidden {
  display: none;
}
#controle {
  cursor: pointer;
}

<div class="row" style="max-width:500px; margin:5 auto;">
<div class="col-12" style="font-size:18px; font-weight:600;">Rio de Janeiro
<span  class="controle" style="float:right" onClick="mostrar('mostra-1')">+</span>
</div>
<div class="col-12 hidden" id="mostra-1">
<span style="font-size:16px; color:#03bb85;;">Nome da Cidade</span><br>
</div>
</div>

<div class="row" style="max-width:500px; margin:5 auto;">
<div class="col-12" style="font-size:18px; font-weight:600;">Rio de Janeiro
<span  class="controle" style="float:right" onClick="mostrar('mostra-2')">+</span>
</div>
<div class="col-12 hidden" id="mostra-2">
<span style="font-size:16px; color:#03bb85;;">Nome da Cidade</span><br>
</div>
</div>

I used your original if and included the innerHTML lines, along with the display switch.

Search more about element selection (exemplo01 and ex02), innerHTML, class and id settings. Also, see an example with Bootstrap that can help: link.