Two scripts not working together

Question

I'm learning to write some scripts in jQuery at work and I have a problem with two of them: one of them is not working along with the other, while when alone it is working perfectly fine. As I'm not expert on Javascript nor programming basics (sorry for that), I don't know if there is some kind of conflict between the scripts.

So I'm begging you to help me, cause I'm desperate right now.

This is the page where both scripts are: http://www.ufv.es/beli (just scroll until you see some blue buttons).

The first script is loading different content on the right side of the page depending on the button you click on.

The second one is supposed to work within "Claustro docente" button, just as it works on this other page I created to show you: http://www.ufv.es/beli2

I'm sure I'm making a lot of mistakes, but if you could please help me... thank you!

 $(document).ready(function() { jQuery('.grados-content').hide(); jQuery('#grados-contenido').html(jQuery('#grados-content1').html()); divContenido = jQuery('.grado-item', this).children('.grados-content'); $('.grado-item',this).click(function(e){ e.preventDefault(); jQuery('#grados-contenido').html(jQuery(this).children('.grados-content').html()); $(this).addClass('grado-seleccionado'); $('.grado-item').not(this).removeClass('grado-seleccionado'); }); var curentProfe = 0; var totalProfes = $('#profes').children().length; function showBigProfe(profeDiv) { var RutaImagen = $(profeDiv).children('img').attr('src'); var titulo = $(profeDiv).find('h3').html(); var subti = $(profeDiv).find('.masinfo').html(); var profeweb = $(profeDiv).find('.webenlace').attr('href'); var profemail = $(profeDiv).find('.mailenlace').attr('href'); var linkedin = $(profeDiv).find('.linkedinenlace').attr('href'); var researchgate = $(profeDiv).find('.researchgate').attr('href'); var facebook = $(profeDiv).find('.facebookenlace').attr('href'); var twitter = $(profeDiv).find('.twitterenlace').attr('href'); $('#grande').fadeIn(); $('#conteneprof').children('img').attr('src', RutaImagen); $('.infocontenido').children('h3').html(titulo); $('.bio').html(subti); if (profeweb == '#') { $('#iconoweb').css('display', 'none'); } else { $('#iconoweb').css('display', 'inline-block'); $('.infocontenido').children('.webenlace').attr('href', profeweb); } if (profemail == '#'){ $('#iconomail').css('display', 'none'); } else{ $('#iconomail').css('display', 'inline-block'); $('.infocontenido').children('.mailenlace').attr('href', profemail); } if (linkedin == '#'){ $('.linkedinenlace').css('display', 'none'); } else { $('.linkedinenlace').css('display', 'inline-block'); $('.infocontenido').children('.linkedinenlace').attr('href', linkedin); } if (researchgate == '#'){ $('.researchgate').css('display', 'none'); } else { $('.researchgate').css('display', 'inline-block'); $('.infocontenido').children('.researchgate').attr('href', researchgate); } if (facebook == '#'){ $('.facebookenlace').css('display', 'none'); } else { $('.facebookenlace').css('display', 'inline-block'); $('.infocontenido').children('.facebookenlace').attr('href', facebook); } if (twitter == '#'){ $('.twitterenlace').css('display', 'none'); } else { $('.twitterenlace').css('display', 'inline-block'); $('.infocontenido').children('.twitterenlace').attr('href', twitter); } } $('.profe', this).mouseenter(function() { $('.infoprof', this).fadeIn(600).css('z-index', '1'); }); $('.profe', this).mouseleave(function() { $('.infoprof', this).fadeOut(600); }); $('.fa-times, #grande').click(function() { $('#grande').fadeOut(); }); $('#conteneprof').click(function(event) { event.stopPropagation(); }); $('.profe', this).click(function() { curentProfe = Number(this.id); showBigProfe(this); }); $('.fa-chevron-left').click(function() { curentProfe = curentProfe - 1; if (curentProfe < 1) { curentProfe = totalProfes; } showBigProfe('#' + curentProfe); }); $('.fa-chevron-right').click(function() { curentProfe = curentProfe + 1; if (curentProfe > totalProfes) { curentProfe = 1; } showBigProfe('#' + curentProfe); }); }); jQuery('.boton-redondo-llamamos').click(function(){ window.location.href = "http://www.ufv.es/nosotros-te-llamamos"; }); 

 #profes{ min-width:106%; } #profes .profe{ width:150px; height:130px; margin:5px; float:left; position:relative; overflow: hidden; cursor:pointer; } #profes .infoprof{ width:100%; height:90px; margin-top:20px; background:rgba(255, 255, 255, 0.75); position:absolute; display:none; } .infoprof a{ text-indent:-9999px; color:transparent; } .infoprof h3, .infoprof p{ position:absolute; color:white; } .infoprof h3{ text-align:center; text-transform:uppercase; color:#003d67; z-index:-1; width:100%; margin:0!important; } #profes .profe img.fotos{ position: absolute; min-height:130px; opacity:.8; } .profe p{ left:30%; top:50%; } .masinfo{ display:none; } #grande{ position:fixed; background-color:rgba(0,0,0,0.7); width:100%; height:100%; top:0px; left:0; display:none; z-index:10; } #conteneprof{ width:625px; display:table; padding:60px; background-color:white; margin:150px auto; opacity:1; position:relative; border-radius:10px; } #conteneprof p{ color:#575950; margin:5px; } .fa-times{ color:#003d67; text-align:center; width:24px; height:24px; position:absolute; top:15px; right:15px; font-size:22px!important; cursor:pointer; border:3px solid transparent; border-radius:30px; transition:all 0.35s linear; -webkit-transition:all 0.35s linear; padding:2px 0 2px 5px; } .fa-times:hover{ transform:rotate(90deg); -webkit-transform:rotate(90deg); border:3px solid #003d67; } .fa-chevron-left, .fa-chevron-right{ position:absolute; width:36px; height:36px; font-size:32px!important; color:#003d67; top:50%; margin-top:-18px; cursor:pointer; transition:all .3s ease; } .fa-chevron-left:hover, .fa-chevron-right:hover{ color:#6fa3b6; } .fa-chevron-left{ left:10px; } .fa-chevron-right{ right:10px; } #conteneprof img{ float:left; width:160px; margin:5px; padding:15px 0 0 45px; } #conteneprof .infocontenido{ max-width:345px; margin:0 57px 0 5px; float:left; padding:15px 0 20px 0; } #conteneprof .infocontenido h3{ color:#003d67; float:left; margin:5px; text-transform:uppercase; } #conteneprof .infocontenido p{ padding:0!important; } #conteneprof .infocontenido a.redenlace{ text-indent: -9999px; float: left; width: 27px; height: 27px; backface-visibility: hidden; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; transform: translateZ(0px); transition-duration: 0.3s; transition-property: transform; vertical-align: middle; border-radius: 200px 200px 200px 200px; -moz-border-radius: 200px 200px 200px 200px; -webkit-border-radius: 200px 200px 200px 200px; display:none; color:transparent; margin:5px; } #conteneprof .infocontenido a.webenlace{ background: url("http://recursos.ufv.es/img/es/icono-web.png") no-repeat 0 0; } #conteneprof .infocontenido a.mailenlace{ background: url("http://recursos.ufv.es/img/es/mail-arroba.png") no-repeat 0 0; } #conteneprof .infocontenido a.linkedinenlace{ background: url("http://recursos.ufv.es/img/es/linkedin.png") no-repeat 0 0; } #conteneprof .infocontenido a.researchgate{ background: url("http://recursos.ufv.es/img/es/logo-research-gate.gif") no-repeat 0 0; } #conteneprof .infocontenido a.facebookenlace{ background: url("http://recursos.ufv.es/img/es/facebook-profes.png") no-repeat 0 0; } #conteneprof .infocontenido a.twitterenlace{ background: url("http://recursos.ufv.es/img/es/twitter.png") no-repeat 0 0; } #conteneprof .infocontenido a.redenlace:before { background: radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0); content: ""; height: 10px; left: 5%; opacity: 0; pointer-events: none; position: absolute; top: 100%; transition-duration: 0.3s; transition-property: transform, opacity; width: 90%; z-index: -1; } #conteneprof .infocontenido a.redenlace:hover, #conteneprof .infocontenido a.redenlace:focus, #conteneprof .infocontenido a.redenlace:active { transform: translateY(-5px); border-radius: 200px 200px 200px 200px; -moz-border-radius: 200px 200px 200px 200px; -webkit-border-radius: 200px 200px 200px 200px; } #conteneprof .infocontenido a.redenlace:hover:before, #conteneprof .infocontenido a.redenlace:focus:before, #conteneprof .infocontenido a.redenlace:active:before { opacity: 1; transform: translateY(5px); } .infocontenido .bio{ max-height:200px; overflow-y:scroll; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Beli test</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="beli.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <script src="beli.js"></script> </head> <body> <div class="grados-menu"> <ul> <li class="grado-item grado-seleccionado"> <a class="enlace" href="#" id="1">Presentación</a> <div class="grados-content" id="grados-content1"> content1 </li> <li class="grado-item"> <a class="enlace" href="#" id="2">Plan de estudios</a> <div class="grados-content" id="grados-content2"> content2 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="3">Título propio: El liderazgo colaborativo en el marketing digital</a> <div class="grados-content" id="grados-content3"> content3 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="4">Metodología</a> <div class="grados-content" id="grados-content4"> content4 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="5">Salidad profesionales del Grado en Marketing</a> <div class="grados-content" id="grados-content5"> content5 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="6">Claustro docente</a> <div class="grados-content" id="grados-content6"> <h1> Claustro docente</h1> <br /> <p> Nuestro equipo docente combina perfiles de diferentes características:</p> <div class="lista"> <ul class="inline"> <li> Profesionales en activo que desempeñan su actividad ajena a la Universidad y que se prestan por su vocación docente a dar clase a nuestros alumnos.</li> <li> Profesores a tiempo completo en la Universidad que son doctores en sus materias.</li> </ul> </div> <br /> <div id="profes"> <div class="profe" id="1"> <div class="infoprof"> <h3 class="hfoto"> Raquel Ayesterán</h3> <a class="webenlace" href="http://raquelayestaran.com">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/raquelayestaran">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/raquel-ayesteran.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Dirección Estratégica, Marketing, Comercial y Comunicación. Doctor en Marketing Integrado 360º. Directora de Grado.</p> </div> </div> <div class="profe" id="2"> <div class="infoprof"> <h3 class="hfoto"> Rafael Alé Ruiz</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/rafael-ale.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Organización de Empresas. Doctor en Físicas.</p> </div> </div> <div class="profe" id="3"> <div class="infoprof"> <h3 class="hfoto"> Guillermo Arce</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://www.linkedin.com/in/guillermo-arce-dr-phd-2b7623b?trk=nav_responsive_tab_profile">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/guillermo-arce.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Marca, Marketing, Ventas, Redes Sociales e Internet Doctor en UAX. Experto en Estrategia de Marca.</p> </div> </div> <div class="profe" id="4"> <div class="infoprof"> <h3 class="hfoto"> Beatriz Duarte</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/beatriz-duarte-monedero-67641682">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/beatriz-duarte.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Doctora en Ciencias Económicas y Empresariales, UCM.Analista Financiero. Responsable de Calidad del Grado en ADE.</p> </div> </div> <div class="profe" id="5"> <div class="infoprof"> <h3 class="hfoto"> Adolfo García</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/adolfo-garcia.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Logística, Marketing y Ventas Experiencia profesional en: MINOLTA, TNT, TELEFONICA, MAFRESA. Licenciado en Ciencias Económicas y Empresariales.</p> </div> </div> <div class="profe" id="6"> <div class="infoprof"> <h3 class="hfoto"> Fidel Rodríguez</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/fidel-rodriguez.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Ciencias sociales, Historia y Artes Doctor en Historia y Doctor en Sociología. Profesor universitario, UFV.</p> </div> </div> <div class="profe" id="7"> <div class="infoprof"> <h3 class="hfoto"> Jesús Sánchez</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/jesus-sanchez.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Comercial y Marketing en ADE+MARKETING Doctor en Derecho, Comillas. Miembro del Comité Científico del Instituto de Investigación. TheScientificCommittee oftheAnnuals of Economicand Management, Universidad Católica Juan Pablo II de Lublin-Polonia.</p> </div> </div> <div class="profe" id="8"> <div class="infoprof"> <h3 class="hfoto"> Francisco Solá</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/matthew-foley-ryan.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Marketing y Comunicación Licenciado en Ciencias Económicas y Empresariales, UCM. Experto en Marketing y Comunicación Publicitaria. Socio de la empresa "Acciones de Comunicación y Estrategia". Responsable de Calidad del Grado en Marketing, UFV.</p> </div> </div> <div class="profe" id="9"> <div class="infoprof"> <h3 class="hfoto"> Alfonso Jesús Torres</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/alfonso-jesus-torres.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Administración de empresas Licenciado en Ciencias Económicas y Empresariales, UAM. Master en Dirección Comercial y Marketing,CEI. Master en Humanidades UFV</p> </div> </div> <div class="profe" id="10"> <div class="infoprof"> <h3 class="hfoto"> Inmaculada Puebla</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/inmaculada-puebla-a398ba46">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/inmaculada-puebla.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Tecnologías de la Información y Comunicación, Ventas, Marketing, Gestión Empresarial, Gamificación, Matemáticas etc. Doctora en Humanidades, UFV. Licenciada en Ciencias Físicas, especialidad Informática por la UCM. Máster de finanzas y marketing UPM. Alta experiencia en empresas tecnológicas.</p> </div> </div> </div> <div class="clear"> &nbsp;</div> <div id="grande"> <div id="conteneprof"> <i class="fa fa-times">&nbsp;</i> <i class="fa fa-chevron-left">&nbsp;</i> <i class="fa fa-chevron-right">&nbsp;</i> <img /> <div class="infocontenido"> <h3> &nbsp;</h3> <div class="clear"> &nbsp;</div> <a class="redenlace webenlace" href="#" id="iconoweb" target="blank_">a</a> <a class="redenlace mailenlace" href="#" id="iconomail" target="blank_">a</a> <a class="redenlace linkedinenlace" href="#" id="iconoli" target="blank_">a</a> <a class="redenlace researchgate" href="#" id="iconorg" target="blank_">a</a> <a class="redenlace twitterenlace" href="#" id="iconotw" target="blank_">a</a> <a class="redenlace facebookenlace" href="#" id="iconotw" target="blank_">a</a> <div class="clear"> &nbsp;</div> <div class="bio"> &nbsp;</div> </div> </div> </div> </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="7">Perfil internacional del Grado en Marketing</a> <div class="grados-content" id="grados-content7"> content7 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="8">Alumni</a> <div class="grados-content" id="grados-content8"> content8 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="9">Vive la UFV</a> <div class="grados-content" id="grados-content9"> content9 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="10">Calidad y mejora del título</a> <div class="grados-content" id="grados-content10"> content10 </div> </li> </ul> </div> <div id="grados-contenido"> &nbsp;</div> </body> </html> 

Answer 1

I've already found the mistake and it wasn't within the js file, but the html itself (I had various elements with the same ID and that's why the second script didn't work along with the first one).

Thank you all for your help!

Cheers.