cambios del sábado

src/data.js

@@ -1,15 +1,31 @@
-let empezar= document.getElementById("img"); //variable para el botón "empezar", que despliega la siguente sección
-empezar.addEventListener("click", mostrar) //evento del click para mostrar la sección oculta en la página
-
-function mostrar() { //función para desplegar la segunda sección del documento
-    if (document.getElementById) { 
-      let activar = document.getElementById("info"); //se crea una variable para ubicar el div a desplegar y se ubica en el HTML
-      activar.style.display = (activar.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div con una función ternaria
-
+let empezar= document.getElementsByClassName("img"); 
+for(let i = 0 ; i < empezar.length; i++){
+  empezar[i].addEventListener('click', function() {
+    mostrar(empezar[i])
+})
+
+  var mostrar = function(info) {
+    info.style.display = (info.style.display == 'none') ? 'block' : 'none';
+}
+
+    window.onload = function () {
+
+
     }
-  }
-  window.onload = function () {
-    //hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente//
-    mostrar("info"); //"contenido" es el nombre del DIV
-  }
 
+
+//     let empezar= document.getElementsByClassName("img"); 
+// empezar.addEventListener("click", mostrar) 
+
+// var mostrar = function() { 
+// //  alert('adsf')
+// if (document.getElementsByClassName){
+//   const activar = document.getElementsByClassName("info");
+//   activar.style.display = (activar.style.display == 'none') ? 'block' : 'none';
+// }
+// }
+
+//     window.onload = function () {
+
+//     mostrar('info')
+    }

src/index.html

@@ -115,8 +115,8 @@ <h2>Noviembre 2019</h2>
 <br>
 <br>
 
-<section id="info" class="hide">
-  <div class=" info">
+<section id="menu" class="hide">
+
     <div class= "ordenar-boton">
       <select name="filter" id="filter"> 
       <option value="filter">Filtrar</option>

src/main.js

@@ -59,11 +59,10 @@ const filtrarData = (prop, val) => {
           <div class="nombre">
           <p> ${element.name}</p></div>
           <br>
-          <div class="img" id="img"> 
+          <div class="img"> 
           <img src="${element.image}"></img>
           </div>
-       <div class= "info" id="info">
-
+          <div class= "info">
           <p> Status: ${element.status} </p>
           <p> Especie: ${element.species} </p>
           <p> tamaño: ${element.origin.name} </p>

src/style.css

@@ -176,12 +176,6 @@ background-color: transparent;
    opacity: 0.9;
  }
 
- .info{
-   display: none;
- }
-
-
-
 .contenedor-video{
 
   background-color: rgb(0, 0, 0);
@@ -202,6 +196,10 @@ background-color: transparent;
 .contenedor-video:hover {
 box-shadow: 0 0 20px green, 0 0 25px green ;
 }
+
+.info{
+  display: none;
+}
 
 .caracteristicas{
   outline:none;