jquery toggle css3 transition not working

I followed instructions I found on StackOverflow answers and does not work.

Here is a webpage: http://www.pardo.cat/Xta/Index4.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
.Informacio_boto, .Informacio_contingut{
width: 400px;
}
.Informacio_contingut {
}
#Informacio_boto {
background-color: rgba(0,0,0,1.00);
color: rgba(255,255,255,1.00);
height: 25px;
font-size: 13px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
#Informacio_continguts {
background-color: rgba(255,245,0,1.00);
color: rgba(0,0,0,1.00);
padding-right: 20px;
padding-left: 20px;
z-index: 20;
position: absolute;
width: 360px;
max-height: 0px;
overflow-y: hidden;
-webkit-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
transition: max-height 2s ease;
}
#Informacio_continguts.expandir {
max-height: 999px;
}
#pasarencima {
background-color: rgba(255,0,4,1.00);
height: 500px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#Informacio_boto').click (function() {
$('#Informacio_continguts').toggleClass('expandir')
});
</script>
</head>
<body>
<div class="Informacio_contingut">
<div id="Informacio_boto">Informació</div>
<div id="Informacio_continguts">
  <p class="petit">Les linies ADSL normals garanteixen un 10% de cabdal, amb aquest tipus de linia empresarial, garantim el 50%.</p>
  <p class="petit">En totes les connexions assignem una Ip fixe, per poder facilitar les connexions remotes, Voip, TransisIP, etc.</p>
  <p class="petit">Sistema de gestió i administració propi.</p>
  <p class="petit">Instal·lació<br>
    Instal·lació d'una antena Nanobridge M5 aprofitant el màstil existent.<br>
    Router RB750/951 amb 5 Wan's.</p>
 </div>
 </div>
 <div id="pasarencima"> Colocar aquí el contenido para  id "pasarencima"</div>
</body>
</html>

Actually I do not know why it does not work. I tried variants that I found but I do not work.

With CSS3 if it works with "Hover"

Here is a webpage: http://www.pardo.cat/Xta/Index3.php

Problem courtesy of: Pardog

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章