вертикальное аккордеон меню

#
вертикальное аккордеон меню
Здравствуйте, кто нибудь подскажите как доделать вертикальное аккордеон меню.
Нужно если есть подгруппы выводить стрелку, при ее нажатии раскрывать подгруппы, а при нажатии на название переходить в категорию при этом раскрывать подгруппы.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:hostcms="http://www.hostcms.ru/"
   exclude-result-prefixes="hostcms">
   <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
   
   <xsl:template match="/">
      <xsl:apply-templates select="/shop"/>
   </xsl:template>
   
   <!-- Шаблон для магазина -->
   <xsl:template match="/shop">
      
      <div class="titleH1">
         <xsl:value-of disable-output-escaping="yes" select="name"/>
      </div>
      <ul class="blockGroupsList">
         <xsl:apply-templates select="shop_group"/>
      </ul>
   </xsl:template>
   
   <!-- Шаблон для групп товара -->
   <xsl:template match="shop_group">
      <xsl:variable name="current_group_id" select="/shop/current_group_id"/>
      <li>
         <xsl:variable name="li_class">
            <xsl:if test="position() = last()"> last</xsl:if>
            <xsl:if test="$current_group_id = @id or count(.//shop_group[@id=$current_group_id])=1"> current</xsl:if>
         </xsl:variable>
         <xsl:attribute name="class">
            <xsl:value-of select="normalize-space($li_class)"/>
         </xsl:attribute>
         
         <a href="{url}">
            <xsl:if test="$current_group_id = @id or count(.//shop_group[@id=$current_group_id])=1">
               <xsl:attribute name="class">
                  <xsl:text>current</xsl:text>
               </xsl:attribute>
            </xsl:if>
            <xsl:value-of disable-output-escaping="yes" select="name"/>
         </a>
         
         <!-- Если есть подгруппы -->
         <xsl:if test="shop_group">
            <ul class="blockGroupsSubList">
               <xsl:apply-templates select="shop_group"/>
            </ul>
         </xsl:if>
      </li>
   </xsl:template>
</xsl:stylesheet>
  



if (Core::moduleIsActive('shop'))
                {
                        $Shop_Controller_Show = new Shop_Controller_Show(
                                Core_Entity::factory('Shop', 1)
                        );
                        if (is_object(Core_Page::instance()->object)
                        && get_class(Core_Page::instance()->object) == 'Shop_Controller_Show')
                        {
                                $Shop_Controller_Show->addEntity(
                                   Core::factory('Core_Xml_Entity')
                                          ->name('current_group_id')
                                          ->value(intval(Core_Page::instance()->object->group))
                                );
                        }
                        $Shop_Controller_Show
                        ->xsl(
                                Core_Entity::factory('Xsl')->getByName('МагазинГруппыТоваровЛевоеМеню')
                        )
                        ->groupsMode('all');

                        $Shop_Controller_Show->show();
                }



    <!--Для левого меню -->
    <script type="text/javascript">
       (function ($) {
          $.fn.liHarmonica = function (params) {
                var p = $.extend({
                  currentClass: 'current',
                  onlyOne: true,
                  speed: 500
                }, params);
                return this.each(function () {
                  var
                  el = $(this).addClass('harmonica'),
                        linkItem = $('ul', el).prev('a');
                  el.children(':last').addClass('last');
                  $('ul', el).each(function () {
                        $(this).children(':last').addClass('last');
                  });
                  $('ul', el).prev('a').addClass('harFull');
                  el.find('.' + p.currentClass).parents('ul').show().prev('a').addClass(p.currentClass).addClass('harOpen');
                  el.find('.allways').parents('ul').addClass('allwaysParent').show().prev('a').addClass('harOpen').addClass('allwaysOpen');
                        
                  linkItem.on('click', function () {
                        if ($(this).next('ul').is(':hidden')) {
                          $(this).addClass('harOpen');
                        } else {
                          $(this).removeClass('harOpen');
                        }
                        if (p.onlyOne) {
                          $(this).closest('ul').closest('ul').find('ul').not($(this).next('ul')).slideUp(p.speed).prev('a').removeClass('harOpen');
                          $(this).next('ul').slideToggle(p.speed);
                        } else {
                          $(this).next('ul').stop(true).slideToggle(p.speed);
                        }
                        return false;
                  });
                });
          };
        })(jQuery);

        /*  Инициализация */
        $(function () {
          $('.blockGroupsList').liHarmonica({
                onlyOne: true,
                speed: 500
          });
        });
</script>



#blockGroups {
        padding: 16px 0;
          background: #4e4e4e;
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4e4e4e),color-stop(1,#5b5959));
  background: -ms-linear-gradient(bottom,#4e4e4e,#5b5959);
  background: -moz-linear-gradient(center bottom,#4e4e4e 0%,#5b5959 100%);
  background: -o-linear-gradient(#5b5959,#4e4e4e);
  overflow: hidden;
  width: 100%;
  -webkit-box-shadow: 0 0 5px #bbb;
  -moz-box-shadow: 0 0 5px #bbb;
  box-shadow: 0 0 5px #bbb;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin-top: 0;
}
        #blockGroups .titleH1 {
               background: none repeat scroll 0 0 transparent;
    color: #ffffff;
    font-family: "Quattrocento Sans",Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    line-height: 32px;
    margin: 0;
    min-height: 26px;
    padding-bottom: 8px !important;
    padding-top: 8px !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
    border-bottom: 1px solid #d6d6d6;
        }
        ul.blockGroupsList {
             overflow: hidden;
             position: relative;
                
        }
                ul.blockGroupsList li {
                        border-bottom: 1px solid #d6d6d6;
                }
                ul.blockGroupsList li.last {
                        padding-bottom: 0;
                        margin-bottom: 0;
                        border-bottom: 0;
                }
                        ul.blockGroupsList li a {
                                display: block;
                                font-size: 13px;
                                line-height: 18px;
                                font-family: "Quattrocento Sans",Arial;
                                text-transform: none;
                                text-decoration: none;
                                color: #ffffff;
                                position: relative;
                                padding-left: 12px;
                                padding-top: 8px;
                                padding-bottom: 8px;
                                text-align: left;
                        }
                                ul.blockGroupsList li a:hover {
                                        color: #4e4e4e;
                                        font-style: normal;
                                        font-weight: bold;
                                        line-height: normal;
                                        text-decoration: none;
                                        text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
                                        background: none repeat scroll 0 0 rgba(228, 193, 27, 1);
                                }
                                ul.blockGroupsList li a.current {
                                        font-style: normal;
                                        font-weight: bold;
                                        line-height: normal;
                                        color: #4e4e4e;
                                        text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
                                        background: none repeat scroll 0 0 rgba(228, 193, 27, 1);
                                }
                                ul.blockGroupsList li a span {
                                        position: absolute;
                                        top: 4px;
                                        left: 0;
                                        height: 7px;
                                        width: 7px;
                                        display: block;
                                }
                                        ul.blockGroupsList li a:hover span {
                                                background-position: 0 -7px;
                                        }
                        ul.blockGroupsList li ul.blockGroupsSubList {
                                padding-top: 20px;
                                display: none;
                        }
                                ul.blockGroupsList li ul.blockGroupsSubList li {
                                        padding: 10px 30px;
                                        margin: 0 -30px;
                                        border-bottom: none;
                                }
                                ul.blockGroupsList li ul.blockGroupsSubList li.current {
                                        background-color: #ffdd40;
                                }
                                        ul.blockGroupsList li ul.blockGroupsSubList li a {
                                                text-transform: none;
                                                position: relative;
                                                padding-left: 33px;
                                        }
                                        ul.blockGroupsList li ul.blockGroupsSubList li a.current {
                                                color: #1c1c1c;
                                        }
                                                ul.blockGroupsList li ul.blockGroupsSubList li a span {
                                                        position: absolute;
                                                        top: 8px;
                                                        left: 0;
                                                        background: url(/images/button-right.png) no-repeat 0 0;
                                                        height: 1px;
                                                        width: 23px;
                                                        display: block;
                                                }


Вот оригинал http://hostcms.pro/blog/solution_v6/58.html
Авторизация