Issue with JQUERY based accordion Integration

Vaadin 6 / 7 / 8
1

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.
  1. 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 );

  1. 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