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>