How to port legacy jquery Single Page Application to emberJS

Design
1

As salamu alicum

Everybody,

I am new to this type of application. I googled and get confused. I have a pet website hosted locally.This website is a SPA.The page is divided into to 4 collapsible panel with a center panel.The west panel contain accordion navigation menu. When I click a menu the accordion response by toggling as well as displaying data retrived by ajax in center panel.I did not use jquery-UI accordion.I created accordion with jquery by simple code.Oh! My code is splitd in 3 files .css …js,.html

For example the nave accordion

Html

<div id="westContent" class="panelContent">
        <ul id="nav"  class="ac-menu">
            <li id="home">
                <a href="#home">Home</a>
            </li>
            <li id="service">
                <a href="#service">Service</a>
            </li>
            <li id="myWorks">
                <a href="#myWorks">My works</a>
            </li>
            <li id="publication">
                <a href="#publication">Publication</a>
            </li>
            <li id="recentActivities">
                <a href="#recentActivities">Recent Activities</a>
            </li>
            <li id="relatedLinks">
                <a href="#relatedLinks">Related Links</a>
            </li>
            <li id="resources">
                <a href="#resources">Resources</a>
            </li>
            <li id="thanks">
                <a href="#thanks">Thanks</a>
            </li>
            <li id="readingLeast">
                <a href="#readingLeast">Reading least</a>
            </li>
            <li id="aboutMe" class="compound-menu">
                <a href="#aboutMe">About me</a>
                <ul class="sub-menu">
                    <li><a href="#storyofmylife">Story of my life</a></li>
                    <li><a href="#myFamily">My family</a></li>
                    <li><a href="#personalLife">Personal life</a></li>
                    <li><a href="#views">Views</a></li>
                    <li><a href="#education">Education</a></li>
                    <li><a href="#interest">Interest</a></li>
                    <li><a href="#professionalExperience">Professional experience</a></li>
                    <li><a href="#endorsements">Endorsements</a></li>
                </ul>
            </li>
            <li id="Photos">
                <a href="#Photos">Photos</a>
            </li>
            <li id="Interaction" class="compound-menu">
                <a href="#Interaction">Interaction</a>
                <ul class="sub-menu">
                    <li><a href="#contactMe">Contact me</a></li>
                    <li><a href="#socializeWith">Socialize with</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#askMe">Ask me</a></li>
                    <li><a href="#gustBook">Gust book</a></li>
                    <li><a href="#subscription">Subscription</a></li>
                    <li><a href="#discussion">Discussion</a></li>
                </ul>
            </li>
            <li id="siteMap">
                <a href="#siteMap">Site map</a>
            </li>
            <li id="rssFeed">
                <a href="#rssFeed">RSS feed</a>
            </li>
        </ul>
    </div>

CSS

 .ac-menu li {
color: rgba(32, 145, 255, 1);
background: linear-gradient(to top, rgba(237, 237, 237, 1) 0%, rgba(196, 196, 196, 1) 100%);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.6);
border: 1px solid rgba(182, 182, 182, 1);
list-style: none;
display: block;
position: relative;
overflow: hidden;
 }
 .ac-menu > li {
   padding-left: 10px;
 } 
 .ac-menu  a {
text-decoration: none !important;
}
 .ac-menu, .sub-menu {
   padding: 0 0 0 0;
}
.ac-menu li:hover,
.ac-menu li:target {
 background:  linear-gradient(to top, rgba(185, 224, 245, 1) 0%,rgba(146, 189, 214, 1)100%);
}

jquery

 $('#nav li ').click(function (e)
  {
      var te = $(e.target);
      if(te.is('.compound-menu')){
         te.children('.sub-menu').slideToggle(2000);
          $('#nav .compound-menu').each(function (){
              if($(this).attr('id')!== te.attr('id'))
                 $(this).children('.sub-menu').slideUp(2000);
          })
      }
      else if(te.parents('.sub-menu').toArray().length<1){
          $('#nav .compound-menu').children('.sub-menu').slideUp(2000);
      }
    //* ..........................
    //jquery Ajax code to retrieve data and wrapping with a div tag to append to center panel  

  })

My issue is how do I modify the code to fit with emberJS.

Jajak-allah khair

Allah-hafiz

With best-regards Nadvi