Hola estoy aprendiendo HTML y estoy haciendo un botón que al clicarlo te enseña un texto, y al volver a clicarle te lo oculta, pero tengo un problema, al poner dos botones siempre me muestra el primero, entonces le cambio de nombre a los DIV para que haga un display del que yo quiero y no me sirve, tengo:
<div style="display: none;">
Si cambio a otro "none" por otr no sirve, se queda mostrado el texto.
Concretamente uso este código, que siempre me muestra el primer "Texto 1"
Código PHP:
<div>
<input
value="Texto 1"
onclick="if (this.parentNode.getElementsByTagName ('div') [0].style.display != '') {
this.parentNode.getElementsByTagName ('div') [0].style.display = '';
this.value = 'Texto 1 (Ocultar)';
} else {
this.parentNode.getElementsByTagName ('div') [0].style.display = 'none';
this.value = 'Texto 1';
}"
type="button"
/>
<div style="display: none;">
<ul>
<li type="a">Texto 1</li>
</ul>
</div>
<br><br>
<input
value="Texto 2"
onclick="if (this.parentNode.getElementsByTagName ('div') [0].style.display != '') {
this.parentNode.getElementsByTagName ('div') [0].style.display = '';
this.value = 'Texto 2(Ocultar)';
} else {
this.parentNode.getElementsByTagName ('div') [0].style.display = 'none';
this.value = 'Texto 2';
}"
type="button"
/>
<div style="display: none;">
<ul>
<li type="a">Texto 2</li>
</ul>
</div>
</div>
Y luego este, que aparecen ya mostrados sin estar oculto y ni siquiera al clicar los oculta ni nada, no sucede nada al hacer onclick, no conozco muy bien la sintaxis de lo que estoy haciendo, me he documentado en internet y es lo que he podido hacer.
Código PHP:
div>
<input
value="Texto 1"
onclick="if (this.parentNode.getElementsByTagName ('div') [0].style.display != '') {
this.parentNode.getElementsByTagName ('div') [0].style.display = '';
this.value = 'Texto 1 (Ocultar)';
} else {
this.parentNode.getElementsByTagName ('div') [0].style.display = 'none1';
this.value = 'Texto 1';
}"
type="button"
/>
<div style="display: none1;">
<ul>
<li type="a">Texto 1</li>
</ul>
</div>
<br><br>
<input
value="Texto 2"
onclick="if (this.parentNode.getElementsByTagName ('div') [0].style.display != '') {
this.parentNode.getElementsByTagName ('div') [0].style.display = '';
this.value = 'Texto 2(Ocultar)';
} else {
this.parentNode.getElementsByTagName ('div') [0].style.display = 'none2';
this.value = 'Texto 2';
}"
type="button"
/>
<div style="display: none2;">
<ul>
<li type="a">Texto 2</li>
</ul>
</div>
</div>
Gracias por la ayuda.