E - Acordeon sliders

ejercicio En este ejercicio utilizo el método addEventListener() dentro de un for para capturar el clic en cualquier solapa del acordeon, seguidamente llamamos a la función AbrirSolapa() que mediante otro for responde al clic para cambiar la clase classList.toggle() de la solapa y del elemento hermano que le sigue nextElementSibling, que es el panel donde está la información correspondiente.

 

Código JavaScript



// ========================================
//  Código JavaScript
//  ACORDEON
//  (cc) 2017, 3con14.pro
// ========================================

var solapa = document.getElementsByClassName('tab');
for (var i=0;i<solapa.length;i++) {
  solapa[i].addEventListener('click', AbrirSolapa());
}
function AbrirSolapa(){
  for (var i=0; i<solapa.length; i++){
    solapa[i].onclick = function(){
      this.classList.toggle('activo');
      this.nextElementSibling.classList.toggle('mostrar');
      };
  }  
}

Código HTML



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Acordeon</title>
    <link rel="stylesheet" href="/css/estilos_js.css">
</head>
<body>

<div class="contenedor">
    <div id="acordeon">

        <button class="tab">Ejemplo 1</button>
        <div class="panel">
        <p>1.- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae assumenda, dignissimos maiores voluptatibus sint consectetur harum deserunt nulla asperiores non. Atque incidunt quaerat natus ab quas, nemo porro. Magnam, iste. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, blanditiis, quaerat!</p>
        </div>

        <button class="tab">Ejemplo 2</button>
        <div class="panel">
        <p>2.- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae assumenda, dignissimos maiores voluptatibus sint consectetur harum deserunt nulla asperiores non. Atque incidunt quaerat natus ab quas, nemo porro. Magnam, iste. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <p>Nesciunt, blanditiis, quaerat!. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate error, rem fugit odit sint soluta doloribus, doloremque dolorem at laborum alias accusantium ratione provident rerum aperiam consequuntur magni esse! Dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo cumque, ratione ab molestiae, pariatur hic omnis reprehenderit. Est assumenda, porro esse expedita sit ipsam tempore. Aperiam perferendis quibusdam debitis porro.</p>
        </div>

        <button class="tab">Ejemplo 3</button>
        <div class="panel">
        <img src="/code/img/developer.png" >
        <p>3.- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae assumenda, dignissimos maiores voluptatibus sint consectetur harum deserunt nulla asperiores non. Atque incidunt quaerat natus ab quas, nemo porro. Magnam, iste. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque praesentium facilis consequuntur accusantium velit eos molestias nostrum alias fugit quis! Velit ipsa quibusdam aspernatur doloribus repellendus, eius animi amet corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, blanditiis, quaerat!.</p>
        </div>

        <button class="tab">Ejemplo 4</button>
        <div class="panel"><p>4.- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae assumenda, dignissimos maiores voluptatibus sint consectetur harum deserunt nulla asperiores non. Atque incidunt quaerat natus ab quas, nemo porro. Magnam, iste. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, blanditiis, quaerat!.</p>
        </div>        

    </div>
</div>

<script src="/js/codigo.js"></script>
</body>
</html>

Reglas CSS

Fíjate en la clase .activo y el pseudoelemento :afeter, con esto cambiamos el más + y el menos - de la parte derecha de la solapa, cambiando cuando está activa.



/* -------------------------------
    CSS para ejemplos JavaScript
    ACORDEON
    (cc) 3con14, 2017
   ------------------------------- */

/* -------------------------------
    CSS para ejemplos JavaScript
    (cc) 3con14, mar-2017
   ------------------------------- */
* { 
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.25s ease-in;
}
:focus { outline: 0 none transparent; }
body {
  min-height       : 100vh;
  font             : 16px/1.2 sans-serif;
  display          : flex;
  background-color : rgba(70, 130, 180, 0.6);
}
h1,h2,h3,h4,h5,h6,p { padding: 0.2rem; }
hr { 
  border           : 0;
  margin           : 0.5em 0;
  height           : 1px;
  background-color : rgba(0, 0, 0, 0.5);
}
ol, ul { margin: 0.5em 0 0.5em 35px; }

.txt-S  { font-size  :  80%;   }
.txt-M  { font-size  :  90%;   }
.txt-L  { font-size  : 110%;   }
.dcha   { text-align : right;  }
.centro { text-align : center; }

.contenedor {
  max-width        : 800px;
  width            : 90%;
  min-height       : 90vh;
  margin           : auto;
  padding          : 2rem;
  border-top       : 10px solid rgba(0, 0,0, 0.2);
  background-color : rgba(0, 0, 0, 0.05);
}

/* BOTONES */
 button {
  margin    : 0.5em 0.25em;
  padding   : 0.25em 0.5em;
  cursor    : pointer;
  font-size : 1em;
  border    : 0;
 }


 /* CLASES PARA ACORDEON */

.panel {
  background-color: rgba(0, 0, 0, 0.05);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
button.tab,button.tab:hover, .activo {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 0.5em;
  text-transform: uppercase;
  text-align: left;
  border-radius: 5px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}
button.tab:hover {
    background-color: rgba(255, 32, 0, 0.4);
}
button.activo {
    background-color: rgba(128, 128, 0, 0.4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
button.tab:after {
  content: '+';
  float: right;
}
button.tab.activo:after {
  content: '-';
}
.mostrar { 
  opacity: 1;
  display: block;
  max-height: 100vh;
}
div.panel p { 
  padding: 0.5em;
  margin: 5px;
}
img {
  max-width: 100%;
  width: 35%;
  height: auto;
  padding: 1em;
  float: right;
}

Demo

acordeon

 

Etiquetas: JavaScript, Ejercicio

Imprimir Correo electrónico

Visitas...

Hoy ........ 0

Ayer ....... 2

Mes ........ 47

Total ........ 5895

En línea...

Hay 17 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS