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>
<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;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$('#Informacio_boto').click (function() {
<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 id="pasarencima"> Colocar aquí el contenido para  id "pasarencima"</div>

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