1

intento crear una lista de categorias, en las que se muestre mas información acerca de cada una al presionar un boton, que muestra ver más. Al presionar este botón busco que aparezca un div, que anteriormente estaba oculto, que muestre un titulo una imagen y un texto y que el buton pase a mostrar "ver menos". Intente realizarlo con JavaScript, utilizando dos variables en las que esten almacenadas las clases "item_lista" y "botones-cat". En esta ultima variable intente agregar un evento que llame a una funcion que cambie el display de "item_lista" segun si su valor es none o block. Adjunto codigo: PD: En HTML utilice bootstrap para darle diseño a los elementos de la lista(clases: "list-group" y "list-group-item).

let categorias_div = document.getElementsByClassName('item_lista');
const botones_cat = document.getElementsByClassName('botones-cat');

botones_cat.addEventListener('click', aparecer());

function aparecer(categorias_div) {
  if (categorias_div.style.display == 'none') {
    botones_cat.innerText = 'ver menos'
    categorias_div.style.display = 'block'
  } else {
    botones_cat.innerText = 'ver mas'
    categorias_div.style.display = 'none'
  }
}
.item_lista {
  display: none;
}
<ul class="list-group">
  <li class="list-group-item categorias">Cubo de Rubik 2x2 <button class="botones-cat">ver mas</button>
    <div class="item_lista">
      <h1 class="titulo">CUBO DE RUBIK 2X2</h1>
      <img src="" alt="">
      <p class="texto">Se trata de un cubo de rubik normal, en el que solo estan las esquinas. Tiene un total de 4 piezas por cada cara.

      </p>
      <br>
      <h2 class="titulo">World Record actual: 0.47s.</h2>
      <h2 class="titulo">Realizado por: <u>Wang Guanbo</u></h2>
    </div>

  </li>
  <li class="list-group-item categorias">Cubo de Rubik 3x3 <button class="botones-cat">ver mas</button>
    <div class="item_lista">
      <h1 class="titulo">CUBO DE RUBIK 3X3</h1>
      <img src="" alt="">
      <p class="texto">Cubo de Rubik original creado por Erno Rubik(<a href="">Ve mas de su
                                    historia aqui</a>)
      </p>
      <br>
      <h2 class="titulo">World Record actual: 3.13s</h2>
      <h2 class="titulo">Realizado por: <u><a href="#mejores">Max Park</a></u></h2>
    </div>
  </li>
  <li class="list-group-item categorias">Cubo de Rubik 4x4 <button class="botones-cat">ver mas</button>
    <div class="item_lista">
      <h1 class="titulo">CUBO DE RUBIK 4X4</h1>
      <img src="" alt="">
      <p class="texto">
        Es un cubo Rubik de cuatro capas en cada cara, por lo tanto tiene 16 piezas en cada cara.

      </p>
      <br>
      <h2 class="titulo">World Record actual: 16.79s</h2>
      <h2 class="titulo">Realizado por: <u><a href="#mejores">Max Park</a></u></h2>

    </div>
  </li>

3 respuestas 3

1

Una solución es utilizar un manejador de eventos para la acción de clic en ver más y ver menos.

En respuesta al evento de click que modificará la visualización del elemento.

 const manejador_de_eventos = event => {
      const itemLista = event.target.parentNode.querySelector('.item_lista');
      event.target.innerText = toggleDisplay(itemLista);
    };

Donde event.target.parentNode es el padre del botón.

event: referencia al objeto del evento
target: es un atributo del objeto de evento que hace referencia al elemento que inició el evento. parentNode: es el nodo padre del elemento.
botao.innerText = toggleDisplay(itemLista) : actualizar el texto del botón cuando se hace click.

 

  
 // Aquí comprueba si el elemento es visible.
 const visibleisElement = element => {
    const styleIS = window.getComputedStyle(element);
    return styleIS.display !== 'none';
  };

   
  const toggleDisplay = element => {
    if (visibleisElement(element)) {
      element.style.display = 'none';
      return 'ver mas';
    } else {
      element.style.display = 'block';
      return 'ver menos';
    }
  };

 
  const controlador_de_eventos = event => {
    const botao = event.target;
    const itemLista = botao.parentNode.querySelector('.item_lista');
    botao.innerText = toggleDisplay(itemLista);
  };

   // Agregar evento de click
  const botones_cat = document.querySelectorAll('.botones-cat');
  botones_cat.forEach(boton => boton.addEventListener('click', controlador_de_eventos));
 .item_lista {
      display: none;
    }
<ul class="list-group">
    <li class="list-group-item categorias">
      Cubo de Rubik 2x2 <button class="botones-cat">ver mas</button>
      <div class="item_lista">
        <h1 class="titulo">CUBO DE RUBIK 2X2</h1>
        <img src="" alt="">
        <p class="texto">Se trata de un cubo de rubik normal, en el que solo están las esquinas. Tiene un total de 4 piezas por cada cara.</p>
        <br>
        <h2 class="titulo">World Record actual: 0.47s.</h2>
        <h2 class="titulo">Realizado por: <u>Wang Guanbo</u></h2>
      </div>
    </li>
    <li class="list-group-item categorias">
      Cubo de Rubik 3x3 <button class="botones-cat">ver mas</button>
      <div class="item_lista">
        <h1 class="titulo">CUBO DE RUBIK 3X3</h1>
        <img src="" alt="">
        <p class="texto">Cubo de Rubik original creado por Erno Rubik(<a href="">Ve mas de su historia aquí</a>)</p>
        <br>
        <h2 class="titulo">World Record actual: 3.13s</h2>
        <h2 class="titulo">Realizado por: <u><a href="#mejores">Max Park</a></u></h2>
      </div>
    </li>
    <li class="list-group-item categorias">
      Cubo de Rubik 4x4 <button class="botones-cat">ver mas</button>
      <div class="item_lista">
        <h1 class="titulo">CUBO DE RUBIK 4X4</h1>
        <img src="" alt="">
        <p class="texto">Es un cubo Rubik de cuatro capas en cada cara, por lo tanto tiene 16 piezas en cada cara.</p>
        <br>
        <h2 class="titulo">World Record actual: 16.79s</h2>
        <h2 class="titulo">Realizado por: <u><a href="#mejores">Max Park</a></u></h2>
      </div>
    </li>
  </ul>

3
  • 1
    Nótese que al comienzo hay que hacer doble clic al botón para mostrar el elemento oculto... supongo que esto se arregla invirtiendo las condicionales, o sea, empezar primero por if (element.style.display === 'block') { ... }... Commented el 18 jul. 2023 a las 22:14
  • Solo tenía que verificar si el elemento es visible antes de la condición. Commented el 19 jul. 2023 a las 0:26
  • gracias por notar mi error Commented el 19 jul. 2023 a las 0:40
1

HTML cuenta con el elemento details el cual no requiere usar javascript

Ejemplo:

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
     margin-bottom: 0.5em;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
    
   
}

details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}
<details>
  <summary>CUBO DE RUBIK 2X2</summary>
  <img src="" alt="" />
  <p class="texto">Se trata de un cubo de rubik normal, en el que solo estan las esquinas. Tiene un total de 4 piezas por cada cara.</p>
  <br>
  <h2 class="titulo">World Record actual: 0.47s.</h2>
  <h2 class="titulo">Realizado por: <u>Wang Guanbo</u></h2>
</details>

<details>
  <summary>CUBO DE RUBIK 2X2</summary>
  <img src="" alt="" />
  <p class="texto">Se trata de un cubo de rubik normal, en el que solo estan las esquinas. Tiene un total de 4 piezas por cada cara.</p>
  <br>
  <h2 class="titulo">World Record actual: 0.47s.</h2>
  <h2 class="titulo">Realizado por: <u>Wang Guanbo</u></h2>
</details>

<details>
  <summary>CUBO DE RUBIK 2X2</summary>
  <img src="" alt="" />
  <p class="texto">Se trata de un cubo de rubik normal, en el que solo estan las esquinas. Tiene un total de 4 piezas por cada cara.</p>
  <br>
  <h2 class="titulo">World Record actual: 0.47s.</h2>
  <h2 class="titulo">Realizado por: <u>Wang Guanbo</u></h2>
</details>

0

Puedes hacer lo siguiente:

  • Colecciona a todos los elementos con la clase botones_cat, que vendrían a ser los botones ver más.

    const botones_cat = document.getElementsByClassName('botones-cat');
    
  • Luego recorres a todos los elementos coleccionados y le asignamos un listener que serán escuchados al hacer el evento click en ellos:

     Array.from(botones_cat).forEach(button => {
       button.addEventListener('click', () => {
         // ...
       });
     });
    
  • Al hacer clic en los botones, seleccionamos al elemento padre que encierra a ese botón (que vendría a ser tu <li>), y de ese <li>, seleccionamos al elemento con la clase item_lista, que vendría a ser todo el contenido que quieres ocultar y mostrar.

     Array.from(botones_cat).forEach(button => {
       button.addEventListener('click', () => {
         const item_lista = button.parentNode.querySelector('.item_lista');
       });
     });
    
  • Luego validamos que si dicho elemento tiene el display: block, se asigna a none para ocultar el elemento, de lo contrario, se asigna block para mostrar el elemento. La misma lógica para el texto del botón.

     Array.from(botones_cat).forEach(button => {
       button.addEventListener('click', () => {
         const item_lista = button.parentNode.querySelector('.item_lista');
         item_lista.style.display = (item_lista.style.display === 'block') ? 'none' : 'block';
         button.innerText = (item_lista.style.display === 'block') ? 'ver menos' : 'ver más';
       });
     });
    

Ejemplo:

const botones_cat = document.getElementsByClassName('botones-cat');
Array.from(botones_cat).forEach(button => {
  button.addEventListener('click', () => {
    const item_lista = button.parentNode.querySelector('.item_lista');
    item_lista.style.display = (item_lista.style.display === 'block') ? 'none' : 'block';
    button.innerText = (item_lista.style.display === 'block') ? 'ver menos' : 'ver más';
  });
});
.item_lista {
  display: none;
}
<ul class="list-group">
  <li class="list-group-item categorias">Cubo de Rubik 2x2 <button class="botones-cat">ver más</button>
    <div class="item_lista">
      <h1 class="titulo">CUBO DE RUBIK 2X2</h1>
      <img src="" alt="">
      <p class="texto">Se trata de un cubo de rubik normal, en el que solo estan las esquinas. Tiene un total de 4 piezas por cada cara.</p>
      <br>
      <h2 class="titulo">World Record actual: 0.47s.</h2>
      <h2 class="titulo">Realizado por: <u>Wang Guanbo</u></h2>
    </div>
  </li>
  <li class="list-group-item categorias">Cubo de Rubik 3x3 <button class="botones-cat">ver más</button>
    <div class="item_lista">
      <h1 class="titulo">CUBO DE RUBIK 3X3</h1>
      <img src="" alt="">
      <p class="texto">Cubo de Rubik original creado por Erno Rubik(<a href="">Ve mas de su historia aqui</a>)
      </p>
      <br>
      <h2 class="titulo">World Record actual: 3.13s</h2>
      <h2 class="titulo">Realizado por: <u><a href="#mejores">Max Park</a></u></h2>
    </div>
  </li>
  <li class="list-group-item categorias">Cubo de Rubik 4x4 <button class="botones-cat">ver más</button>
    <div class="item_lista">
      <h1 class="titulo">CUBO DE RUBIK 4X4</h1>
      <img src="" alt="">
      <p class="texto">Es un cubo Rubik de cuatro capas en cada cara, por lo tanto tiene 16 piezas en cada cara.</p>
      <br>
      <h2 class="titulo">World Record actual: 16.79s</h2>
      <h2 class="titulo">Realizado por: <u><a href="#mejores">Max Park</a></u></h2>
    </div>
  </li>
</ul>

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.