CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
Vivekanand P V
Vivekanand P V

Reputation: 891

Append Plus or Minus to jQuery Accordion

For some strict rules about style, I am not supposed to use jquery ui css. Given this constraint, I have successfully implemented accordion using jQuery-UI. This is a part of list of items that I get in MVC Razor. So there are as many accordions as there are items (I'm using a foreach loop in my view). This is the reason, I am using a class name instead of the standard way of 'id=accordion'.

Thus my html:

<div class="accordion">
                        <h4><span class="panel-icon">+</span> Addresses</h4>
                        <div>
                            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                        </div>
</div>

and script:

<script>

    $(function () {
        $(".accordion").accordion({
            collapsible: true,
            active: false
        });


</script>

The point is to toggle the 's text to '-' or '+' as the case may be. How can I achieve this?

Upvotes: 0

Views: 565

Answers (1)

nihar jyoti sarma
nihar jyoti sarma

Reputation: 541

you can pass icon like below in your function.If it accordion closed then pass as plus icon css in header properties.Again it open then pass minus icon in css activeheader properties

$(function () {
  icons = {
      header: "ui-icon-circle-arrow-plus",
      activeHeader: "ui-icon-circle-arrow-minus"
    };

        $(".accordion").accordion({
            collapsible: true,
            active: false,
        icons: icons
        });
});

Upvotes: 2

Related Questions