Skip to main content
3 de 6
variable name
cardosource
  • 1.6k
  • 3
  • 8

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 visibleElement = element => {
const computedStyle = window.getComputedStyle(element);
return computedStyle.display !== 'none';
  };

  
  const toggleDisplay = element => {
if (visibleElement(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 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>

cardosource
  • 1.6k
  • 3
  • 8