1

My Accordion Menu has a Counter to count the Submenus. I want to change it to Plus Minus. If there is a Submenu than "Plus" should be add if is closed, if is opened than a Minus.

If there is no SubMenu than nothing should be added.

The Counter code

$('#cssmenu > ul > li ul').each(function(index, e){
      var count = $(e).find('li').length;
      var content = '<span class="cnt">' + count + '</span>';
      $(e).closest('li').children('a').append(content);
});

jsFiddle Demo

joker
  • 982
  • 9
  • 23
karadayi
  • 2,212
  • 2
  • 21
  • 36
  • 1
    [HERE](http://jsfiddle.net/yxxF4/) 's a workaround for you. Play with `span.plusminus` style as you desire. – Batu.Khan Apr 14 '14 at 10:29
  • @BatuZet Thanks for the Code! At loading the Page the state of the span is everytime "+" even if the Menu is opened. – karadayi Apr 14 '14 at 10:44
  • 1
    Then when adding those spans, you can add them as `-` inside since they are gonna be opened as default. – Batu.Khan Apr 14 '14 at 10:46
  • @BatuZet Thanks for your help! Could you maybe tell me also how I can change the Class Name instead using .text() ? I want to use FontAwesome for the Menu. – karadayi Apr 14 '14 at 11:17
  • Class Name? `var content = '' + count + '+';` this is where you add the `span` and simply change `class="plusminus"` to `class="whatever_you_want"`. Is this what you meant? – Batu.Khan Apr 14 '14 at 11:30
  • Nope. [FontAwesome](http://fortawesome.github.io/Font-Awesome/icons/) FontAwesome is using CSS Icons. Thats why if state is changed than css class name should be changed too [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) – karadayi Apr 14 '14 at 11:34
  • Oh. Then you need to use `.removeClass().addClass()` method. Or `.toggleClass()`. [CHECK HERE](https://api.jquery.com/toggleClass/) – Batu.Khan Apr 14 '14 at 11:41

2 Answers2

2

Well you could achieve this by first getting two icons 1. Plus 2. Minus and putting something like this in your css:

#cssmenu > ul > li.has-sub > a span {
    background: url(images/icon_plus.png) 90% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
    background: url(images/icon_minus.png) 90% center no-repeat;
}

Here my menu is as follows:

<div id="cssmenu">
        <ul>
            <li><a href="#"><span>Products</span></a>
                <ul>
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Menus</a></li>
                    <li><a href="#">Products</a></li>
                </ul>
            </li>
        </ul>
</div>

Now with jquery check if your menu has a submenu using:

$('#cssmenu > ul > li:has(ul)').addClass("has-sub");

And add the two css classes you made and drop down using jquery. I made a jfiddle as that would be too much to put here.

Here you go Jfiddle - accordian plus minus

Hope this helps! Not all of the code is mine. Cheers!

damien hawks
  • 512
  • 3
  • 17
1

I would suggest you to use the Accordion Jquery-Ui for that

Jquery-ui

Michael
  • 343
  • 2
  • 13