I wanted to pass this function to jquery to place the animations in my accordion, I use the parameters to select the element of the accordion that I want to open but it gives me an error, if not I select the element from the array then if it works but just click it to open it an element opens all, and I want it to open only when clicked, the code works with native javascript the problem is when I want to pass it to jquery, if it can't tell me how jquery animations can be used in javascript native I've been looking for it but I can't find anything
var lista = document.getElementsByClassName('lista');
var icon = document.getElementsByClassName('fas');
var clic = 1;
function abrirCerrar(num){
if(clic==1){
lista[num].style.height = 'auto';
lista[num].style.opacity = '1';
icon[num].style.transform = 'rotate(180deg)';
clic = 0;
}else{
lista[num].style.height = '0px';
lista[num].style.opacity = '0';
icon[num].style.transform = 'rotate(0deg)';
clic = 1;
}
}
*{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
html{
scroll-behavior: smooth;
}
body{
background: #53CDE2;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
header{
background: #005792;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.logo{
background: #fff;
}
.menu{
padding: 20px;
}
.menu li{
list-style: none;
display: inline-flex;
}
.menu a{
color: #EDF9FC;
font-family: 'Roboto', sans-serif;
font-size: 20px;
margin: 0px 20px;
transition: 0.3s;
}
.menu a:hover{
opacity: 0.1;
}
footer{
background: #005792;
text-align: center;
width: 100%;
padding: 20px 0px;
}
footer a{
color: #EDF9FC;
font-size: 15px;
}
footer a:hover{
opacity: 0.5;
}
/*______________________Inicio________________________*/
.texto-principal{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
background: url(imagenes/Pueblo_Paleta.png);
background-position: center;
background-attachment: contain;
background-size: cover;
height: 550px;
text-align: center;
}
.texto-principal h1{
color: #EDF9FC;
font-size: 70px;
font-family: 'Roboto Condensed', sans-serif;
}
.texto-principal h3{
color: #EDF9FC;
font-size: 40px;
font-family: 'Roboto Condensed', sans-serif;
opacity: 0.8;
}
.texto-principal .fas{
cursor: pointer;
padding: 20px;
font-size: 80px;
color: #fff;
margin: 120px 0px 0px;
}
.romemu{
width: 90%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 30px auto;
background: rgba(209, 244, 250, 0.5);
border-radius: 2px;
}
#roms{
background: #D1F4FA;
width: 600px;
min-height: 450px;
padding: 10px;
margin: 20px;
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
opacity: 0;
transition: all 0.8s;
}
#emuladores{
background: #D1F4FA;
width: 600px;
min-height: 450px;
padding: 10px;
margin: 20px;
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
opacity: 0;
transition: all 0.8s;
}
.titulor, .tituloe{
width: 100%;
background: #005792;
color: #EDF9FC;
text-align: center;
position: absolute;
top: 0;
padding: 10px 0;
font-size: 22px;
}
.imgr{
width: 65%;
margin-top: 50px;
padding: 20px;
filter: drop-shadow(-12px 12px 5px #222);
transition: all 0.5s ease;
}
.imgr:hover{
filter: drop-shadow(-5px 5px 5px #222);
opacity: 0.85;
}
.imge{
width: 65%;
margin-top: 50px;
padding: 20px;
filter: drop-shadow(12px 12px 5px #222);
transition: all 0.5s ease;
}
.imge:hover{
filter: drop-shadow(5px 5px 5px #222);
opacity: 0.85;
}
.rom, .emulador{
width: 20%;
margin: 60px 5px 5px 5px;
padding: 5px;
display: none;
}
.irom{
width: 70%;
position: relative;
top: 25%;
left: 15%;
filter: drop-shadow(-13px 13px 5px #222);
opacity: 0.8;
transition: 0.5s;
}
.irom:hover{
filter: drop-shadow(-5px 5px 5px #222);
opacity: 1;
}
.iemu{
width: 70%;
position: relative;
top: 25%;
left: 15%;
filter: drop-shadow(13px 13px 5px #222);
opacity: 0.8;
transition: 0.5s;
}
.iemu:hover{
filter: drop-shadow(5px 5px 5px #222);
opacity: 1;
}
/*____________________Roms_y_Emuladores____________________*/
.list{
background: rgba(209, 244, 250, 0.5);
width: 90%;
margin: 20px auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.separador{
width: 100%;
height: 100%;
margin: 20px;
border-radius: 10px;
}
.list-label{
cursor: pointer;
}
.separador h2{
color: #EDF9FC;
font-size: 35px;
background: #005792;
margin: 0;
padding: 15px;
border-radius: 5px;
transition: 0.3s;
}
.separador h2:hover{
opacity: 0.9;
}
.separador .fas{
color: #EDF9FC;
padding: 5px;
transform: rotate(360deg);
transition: 0.5s;
}
.list-selector{
display: none;
}
.lista{
background: #D1F4FA;
list-style: none;
margin: auto;
padding: 10px;
opacity: 0;
height: 0;
overflow: hidden;
text-align: center;
transition: 0.75s;
}
.list li{
background: #005792;
margin: 20px 10px;
padding: 10px;
border-radius: 5px;
}
.list a{
color: #EDF9FC;
font-size: 22px;
transition: 0.4s;
}
.list a:hover{
opacity: 0.3;
}
/*__________________________Entradas____________________________*/
.content{
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
margin: 20px;
padding: 20px;
}
.content_left{
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
width: 75%;
margin: 10px;
}
.content_left h1{
position: relative;
text-align: center;
font-size: 40px;
margin: 10px;
color: #EDF9FC;
}
.content_left hr{
color: #D1F4FA;
width: 100%;
}
.content_left .product{
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
margin: 10px;
}
.product img{
width: 35%;
margin: 10px;
}
.product table{
margin: 10px;
font-size: 22px;
color: #D1F4FA;
}
.info{
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-around;
margin: 10px;
padding: 30px;
}
#dowrom, #dowemu{
padding: 20px;
margin: 17px;
border-radius: 5px;
}
#dowrom{
background: #005792;
color: #EDF9FC;
font-size: 25px;
transition: 0.3s;
}
#dowrom:hover{
background: #D1F4FA;
color: #005792;
}
#dowemu{
background: #D1F4FA;
color: #005792;
font-size: 20px;
transition: 0.3s;
}
#dowemu:hover{
background: #005792;
color: #D1F4FA;
}
.content_right{
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 25%;
margin: 20px;
}
.content h2{
font-size: 25px;
text-align: center;
color: #D1F4FA;
}
.content .sub_product{
height: 20%;
margin: 10px;
text-align: center;
color: #005792;
}
.sub_product li{
padding: 10px;
background: #D1F4FA;
margin: 10px;
border-radius: 10px;
transition: 0.3s;
}
.sub_product li:hover{
background: #005792;
}
.sub_product li:hover a{
color: #D1F4FA;
}
.sub_product a{
font-size: 17px;
color: #005792;
transition: 0.3s;
}
@media all and (max-width: 1000px){
.romemu{
flex-flow: column wrap;
}
.roms, .emuladores{
width: 90%;
margin: 15px auto;
}
.rom, .emulador{
width: 45%;
}
.content{
flex-flow: column nowrap;
}
.content_left{
width: 100%;
margin: 25px;
}
.content_right{
width: 100%;
margin: 25px;
}
.sub_product{
flex-flow: row nowrap;
}
.sub_product li{
display: inline-flex;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>PokeRoms - Todas las Roms de Pokemon GB, GBC, GBA, N64, GC, NDS, WII, 3DS.</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="estilo.css">
<script type="text/javascript" src="codigo.js"></script>
</head>
<body>
<header>
<div class="logo">
<a href=""></a>
</div>
<div class="menu">
<nav>
<ul>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="roms.html">Roms</a></li>
<li><a href="emuladores.html">Emuladores</a></li>
</ul>
</nav>
</div>
</header>
<section class="list">
<div class="separador" id="gb-roms">
<label for="gb" class="list-label"><h2>GameBoy/GB Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="gb" onclick="abrirCerrar(0)">
<ul class="lista">
<li>
<a href=""><strong>(GB) - Pokemon Azul</strong></a>
</li>
<li>
<a href=""><strong>(GB) - Pokemon Amarrilla</strong></a>
</li>
</ul>
</div>
<div class="separador" id="gbc-roms">
<label for="gbc" class="list-label"><h2>GameBoy Color/GBC Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="gbc" onclick="abrirCerrar(1)">
<ul class="lista">
<li>
<a href=""><strong>(GBC) - Pokemon Cristal</strong></a>
</li>
<li>
<a href=""><strong>(GBC) - Pokemon Plata</strong></a>
</li>
<li>
<a href=""><strong>(GBC) - Pokemon Oro</strong></a>
</li>
<li>
<a href=""><strong>(GBC) - Pokemon Pinball</strong></a>
</li>
<li>
<a href=""><strong>(GBC) - Pokémon Puzzle Challenge</strong></a>
</li>
<li>
<a href=""><strong>(GBC) - Pokémon Trading Card Game</strong></a>
</li>
<li>
<a href=""><strong>(GBC) - Pokémon Trading Card Game 2</strong></a>
</li>
</ul>
</div>
<div class="separador" id="gba-roms" >
<label for="gba" class="list-label"><h2>GameBoy Advance/GBA Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="gba" onclick="abrirCerrar(2)">
<ul class="lista">
<li>
<a href=""><strong>(GBA) - Pokemon Rojo</strong></a>
</li>
<li>
<a href=""><strong>(GBA) - Pokemon Verde</strong></a>
</li>
<li>
<a href=""><strong>(GBA) - Pokemon Esmeralda</strong></a>
</li>
<li>
<a href=""><strong>(GBA) - Pokemon Zafiro</strong></a>
</li>
<li>
<a href=""><strong>(GBA) - Pokémon Rubi</strong></a>
</li>
<li>
<a href=""><strong>(GBA) - Pokémon Equipo Misterioso: Equipo de Rescate Rojo</strong></a>
</li>
<li>
<a href=""><strong>(GBA) - Pokémon Pinball: Rubi y Zafiro</strong></a>
</li>
</ul>
</div>
<div class="separador" id="n64-roms">
<label for="n64" class="list-label"><h2>Nintendo 64/N64 Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="n64" onclick="abrirCerrar(3)">
<ul class="lista">
<li>
<a href=""><strong>(N64) - Pokemon Puzzle League</strong></a>
</li>
<li>
<a href=""><strong>(N64) - Pokemon Snap</strong></a>
</li>
<li>
<a href=""><strong>(N64) - Pokemon Stadium</strong></a>
</li>
<li>
<a href=""><strong>(N64) - Pokemon Stadium 2</strong></a>
</li>
</ul>
</div>
<div class="separador" id="gc-roms">
<label for="gc" class="list-label"><h2>Nintendo GameCube/GC Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="gc" onclick="abrirCerrar(4)">
<ul class="lista">
<li>
<a href=""><strong>(GC) - Pokemon Colosseum</strong></a>
</li>
<li>
<a href=""><strong>(GC) - Pokemon Channel</strong></a>
</li>
<li>
<a href=""><strong>(GC) - Pokemon XD: Tempestad Oscura</strong></a>
</li>
<li>
<a href=""><strong>(GC) - Pokemon Box: Rubi y Zafiro</strong></a>
</li>
</ul>
</div>
<div class="separador" id="nds-roms">
<label for="nds" class="list-label"><h2>Nintendo DS/NDS Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="nds" onclick="abrirCerrar(5)">
<ul class="lista">
<li>
<a href=""><strong>(NDS) - Pokemon Diamante</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokemon Perla</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokemon Platino</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokemon Oro HeartGold</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Plata SoulSilver</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Mundo Misterioso: Equipo de Rescate Azul</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Mundo Misterioso: Exploradores del Tiempo</strong></a>
</li>
<li>
<a href=""><strong>(NDS) Pokémon Mundo Misterioso: Exploradores de la Oscuridad</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Mundo Misterioso: Exploradores del Cielo</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Ranger</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Sombras de Almia</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Trazos de Luz</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Dash</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Link!</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Negro</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Blanco</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Negro 2</strong></a>
</li>
<li>
<a href=""><strong>(NDS) - Pokémon Blanco 2</strong></a>
</li>
</ul>
</div>
<div class="separador" id="wii-roms">
<label for="wii" class="list-label"><h2>Nintendo Wii/Wii Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="wii" onclick="abrirCerrar(6)">
<ul class="lista">
<li>
<a href=""><strong>(Wii) - PokePark Wii: La gran aventura de Pikachu</strong></a>
</li>
<li>
<a href=""><strong>(Wii) - PokePark 2: Un mundo de ilusiones</strong></a>
</li>
<li>
<a href=""><strong>(Wii) - Pokemon Battle Revolution</strong></a>
</li>
</ul>
</div>
<div class="separador" id="3ds-roms">
<label for="3ds" class="list-label"><h2>Nintendo 3DS/3DS Roms <i class="fas fa-angle-down"></i></h2></label>
<input type="checkbox" name="list" class="list-selector" id="3ds" onclick="abrirCerrar(7)">
<ul class="lista">
<li>
<a href=""><strong>(3DS) - Pokemon Omega Ruby</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon Omega Zafiro</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon X</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon Y</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon Sol</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon Luna</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon Ultra Sol</strong></a>
</li>
<li>
<a href=""><strong>(3DS) - Pokemon Ultra Luna</strong></a>
</li>
</ul>
</div>
</section>
<footer>
<nav class="pie">
<a href="">Desarrollado por Felix Lozada</a>
</nav>
</footer>
</body>
</html>
This would be the function if I pass it to jquery
var lista = $('.lista');
var icon = $('.fas');
var clic = 1;
$('.list-selector').click(function abrirCerrar(num){
if(clic==1){
lista[num].slideDown(1000);
clic = 0;
}else{
lista[num].slideUp(1000);
clic = 1;
}
})
var lista = $('.lista');
var icon = $('.fas');
var clic = 1;
$('.list-selector').click(function abrirCerrar(num){
if(clic==1){
lista[num].slideDown(1000);
clic = 0;
}else{
lista[num].slideUp(1000);
clic = 1;
}
})
Actually, what is happening is that the "num" argument that you expect in the function does not exist.
When you add a click event in JQuery you don't need to declare it in the HTML.
Esta parte del código debería quedar así:
Luego si estas usando un checkbox lo mejor seria un onChange en vez de click. Por otro lado para validar si el elemento se encuentra chequeado puedes usar un toggle.
Tu código podría quedar así:
Puedes ver tu codigo funcionando en este enlace: https://codepen.io/rtelenta/pen/xoqNdp