Issue with JQUERY based accordion Integration

Hi
Experts

Recently I have started working on Vaadin. So, please forgive my ignorance. I am trying to integrate an accordion which is written using HTML, JS (JQUERY) and CSS style sheet. When I open it directly on IE / Chrome, it perfectly works, the items gets open and close. But I am facing issue when trying to integrate the same code on Vaadin server.

1) I created one CustomLayout and put all the HTML script there and added the CustomLayout in UI.

<div id='acdcssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>
         <li class='last'><a href='#'><span>Contact</span></a></li>
      </ul>
   </li>

   <li class='active'><button><span>Home</span></button></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
   
</ul>
</div>

2) Then I used @JavaScript annotation to send the JS (JQUERY) file at client side. 

@com.vaadin.annotations.JavaScript({"http://code.jquery.com/jquery-latest.min.js","script.js");

code snippet of script.js

( function( $ ) {
$( document ).ready(function() {
$('#acdcssmenu > ul > li > a').click(function() {
  $('#acdcssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');    
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#acdcssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;    
  }        
});

});
} )( jQuery );

3) Then I added css part in styles.scss

#acdcssmenu,
#acdcssmenu ul,
#acdcssmenu li,
#acdcssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;a
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}

#acdcssmenu > ul > li > a {
  font-size: 14px;
  display: block;
  background: url(images/pattern.png) top left repeat;
  color: #ffffff;
  border: 1px solid #ba2f14;
  border-top: none;
  text-shadow: 0 -1px 1px #751d0c;
}

#acdcssmenu > ul > li > button {
  font-size: 14px;
  display: block;
  background: url(images/pattern.png) top left repeat;
  color: #ffffff;
  border: 1px solid #ba2f14;
  border-top: none;
  text-shadow: 0 -1px 1px #751d0c;
}
........
.......

After starting the server I can see the JS file are copied at browser side. But when I click on the menu, nothing happens. However the layout and screens are perfectly OK.
After further debug I found that the click event instead of calling JQUERY / script.js rather calls below function which is a part of com.vaadin.DefaultWidgetSet-0.js

function qi(b){return function(){if(Xg()){return ri(b,this,arguments)}else{var a=ri(b,this,arguments);a!=null&&(a=a.val);return a}}}

If I open it directly on IE the click event actually calls below line of script.js (JQUERY) file and it works without any issue
$('#acdcssmenu > ul > li > a').click(function() {

I am not sure what is wrong here. Kindly suggest how to proceed.

Regards,
Vishal