0

Tengo este javascript y funciona bien en mostrar y ocultar pero quiero que solo muestre el que se selecciona pero se muestra en todos los divs que puedo hacer para componer eso? Soy super nuevo... es esto..

<script>
    alert ("Sitió Web En Desarrollo")
    function info() {
        var x = document.getElementsByClassName("info-mas");
        for (var i = 0; i < x.length; i++) { 
            x[i].style.display = "block"; 
        }
    }
    function ocultarinfo() {
        var x = document.getElementsByClassName("info-mas");
        for (var i = 0; i < x.length; i++) { 
            x[i].style.display = "none"; 
        }
    }
</script>

<button type="button" class="mas-info" onclick="info()" >Mas Info +</button>
<div class="info-mas">
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo()">Menos Info -</a>
</div>
<button type="button" class="mas-info" onclick="info()" >Mas Info +</button>
<div class="info-mas">
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo()">Menos Info -</a>
</div>
0

2 respuestas 2

1

El problema es que en tu función usas getElementsByClassName para encontrar el elemento que quieres mostrar/ocultar. Pero hay más de un elemento con la misma clase.

Lo que necesitas hacer es diferenciar de alguna forma los elementos a mostrar/ocultar.

A tu código le hice los siguientes cambios:

  • Agrego el atributo data-id a los elementos que se muestran y ocultan.
  • Agrego el parámetro id a las funciones info y ocultarinfo.
  • Reemplazo el método getElementsByClassName por querySelectorAll para hacer una búsqueda más precisa de los elementos (por clase y valor del atributo data-id).

Quedando así:

function info(id) {
    var x = document.querySelectorAll('.info-mas[data-id="' + id + '"]');
    for (var i = 0; i < x.length; i++) { 
        x[i].style.display = "block"; 
    }
}
function ocultarinfo(id) {
    var x = document.querySelectorAll('.info-mas[data-id="' + id + '"]');
    for (var i = 0; i < x.length; i++) { 
        x[i].style.display = "none"; 
    }
}
<button type="button" class="mas-info" onclick="info('1')" >Mas Info +</button>
<div class="info-mas" data-id="1">
    <p align="center">texto</p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo('1')">Menos Info -</a>
</div>
<button type="button" class="mas-info" onclick="info('2')" >Mas Info +</button>
<div class="info-mas" data-id="2">
    <p align="center">texto</p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo('2')">Menos Info -</a>
</div>

1
  • Perfecto justo lo que necesitaba muchas gracias.
    – Alst Adm
    Commented el 17 oct. 2018 a las 4:51
0
<script>
    function info(estado) {
        var x = document.getElementsByClassName("info-mas");
        switch(estado){
            case 'menos':
                x[0].style.display = "none"; 
            break;
            case 'mas':
               x[0].style.display = "block"; 
            break;
        }

    }
</script>

<button type="button" class="mas-button" onclick="info('mas')" >Mas Info + 
</button>
<div class="info-mas" style="display:block;">
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="info('menos')">Menos Info -</a>
</div>
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.