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>
Some blessed soul to help me?
– user247515
The two met me friend I wanted to evaluate both, but @Jean Barbosa’s, adapted due to my code, but thank you very much, I am very grateful for the help!
– user247515
The yes is because I’m new here, I’ll take a look! Valeuuuu!
– user247515