Skip to main content
editada
Origen Enlace
cardosource
  • 1.6k
  • 3
  • 8
 

  
 // Aquí comprueba si el elemento es visible.
 

  // Agregar evento de click
 const visibleisElement = element => {
    const styleIS = window.getComputedStyle(element);
    return styleIS.display !== 'none';
  };

  // Função para alterar a exibição do elemento
  const toggleDisplay = element => {
    if (visibleisElement(element)) {
      element.style.display = 'none';
      return 'ver mas';
    } else {
      element.style.display = 'block';
      return 'ver menos';
    }
  };

  // Controlador de eventos para lidar com o clique
  const controlador_de_eventos = event => {
    const botao = event.target;
    const itemLista = botao.parentNode.querySelector('.item_lista');
    botao.innerText = toggleDisplay(itemLista);
  };

   // AdicionarAgregar evento de clique em cada botãoclick
  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>
// Aquí comprueba si el elemento es visible.
 

  // Agregar evento de click
 const visibleisElement = element => {
    const styleIS = window.getComputedStyle(element);
    return styleIS.display !== 'none';
  };

  // Função para alterar a exibição do elemento
  const toggleDisplay = element => {
    if (visibleisElement(element)) {
      element.style.display = 'none';
      return 'ver mas';
    } else {
      element.style.display = 'block';
      return 'ver menos';
    }
  };

  // Controlador de eventos para lidar com o clique
  const controlador_de_eventos = event => {
    const botao = event.target;
    const itemLista = botao.parentNode.querySelector('.item_lista');
    botao.innerText = toggleDisplay(itemLista);
  };

  // Adicionar evento de clique em cada botão
  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>
 

  
 // 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>
variable name e identation E CODIGO
Origen Enlace
cardosource
  • 1.6k
  • 3
  • 8
// Aquí comprueba si el elemento es visible.
 

  // Agregar evento de click
 const visibleElementvisibleisElement = element => {
    const styleIsstyleIS = window.getstyleIsgetComputedStyle(element);
    return styleIsstyleIS.display !== 'none';
  };

  // Função para alterar a exibição do elemento
  const toggleDisplay = element => {
    if (visibleElementvisibleisElement(element)) {
      element.style.display = 'none';
      return 'ver mas';
    } else {
      element.style.display = 'block';
      return 'ver menos';
    }
  };

  // Controlador de eventos para lidar com o clique
  const controlador_de_eventos = event => {
    const botao = event.target;
    const itemLista = botao.parentNode.querySelector('.item_lista');
    botao.innerText = toggleDisplay(itemLista);
  };

  // AgregarAdicionar evento de clickclique em cada botão
  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">Cubocategorias">
      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 estanestá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">Cubocategorias">
      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<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">Cubocategorias">
      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">
       <p Esclass="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>
// Aquí comprueba si el elemento es visible.
const visibleElement = element => {
const styleIs = window.getstyleIs(element);
return styleIs.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>
// Aquí comprueba si el elemento es visible.
 

  // Agregar evento de click
 const visibleisElement = element => {
    const styleIS = window.getComputedStyle(element);
    return styleIS.display !== 'none';
  };

  // Função para alterar a exibição do elemento
  const toggleDisplay = element => {
    if (visibleisElement(element)) {
      element.style.display = 'none';
      return 'ver mas';
    } else {
      element.style.display = 'block';
      return 'ver menos';
    }
  };

  // Controlador de eventos para lidar com o clique
  const controlador_de_eventos = event => {
    const botao = event.target;
    const itemLista = botao.parentNode.querySelector('.item_lista');
    botao.innerText = toggleDisplay(itemLista);
  };

  // Adicionar evento de clique em cada botão
  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>
variable name e identation
Origen Enlace
cardosource
  • 1.6k
  • 3
  • 8
// Aquí comprueba si el elemento es visible.
  const visibleElement = element => {
const computedStylestyleIs = window.getComputedStylegetstyleIs(element);
return computedStylestyleIs.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>
// 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>
// Aquí comprueba si el elemento es visible.
const visibleElement = element => {
const styleIs = window.getstyleIs(element);
return styleIs.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>
variable name
Origen Enlace
cardosource
  • 1.6k
  • 3
  • 8
Loading
editada
Origen Enlace
cardosource
  • 1.6k
  • 3
  • 8
Loading
Origen Enlace
cardosource
  • 1.6k
  • 3
  • 8
Loading