按钮不起作用jsf

Question

我有一个.xhtml页面。按钮不起作用。

  <div class="overlay-inner" id="overlay-inner">
        <h:button onclick="toggle()" value="Overlay" id="toggleButton"/>
    </div>

和css文件

.overlay-inner{
    width:100%;
    height:100%;
    background: url(../resources/img/28h3fwh.png) repeat;
    position:absolute;
    z-index:50;
    visibility: hidden; 
}
.overlay-inner input{
    z-index:51;
    color: #000;
    visibility: visible;
}

和js功能

$("#toggleButton").click(function(){
                if ( $("#overlay-inner").css('visibility') == 'hidden' )
                     $("#overlay-inner").css('visibility','visible');
                  else
                     $("#overlay-inner").css('visibility','hidden');
                });

当我按下按钮时，没有任何事情发生。