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>