CODEWITHSUNDEEP
jquery
vlcik
vlcik

Reputation: 960

JQuery Accordion default item

I'm trying to define default active item in my accordion menu:

function activate_accordion(course_id){
        var active_item = '';
        if (course_id == false){
            active_item = false;
        }
        else {
            active_item = $('.accordion div[id="course-' + course_id + '"]').attr('active');
        }

        alert(active_item);
        var icons = {
                header: "../../img/plus.png",
                activeHeader: "../../img/minus.png"
            };

        $( ".accordion" ).accordion({
            collapsible: true,
            icons: icons,
            active: active_item,
            heightStyle: "content"
        });
    }

My JsFiddle: http://jsfiddle.net/fvMre/ Accordion works but I encouter two problems:

  1. First problem is that "active" option doesn't work and all items are collapsed
  2. My Icon option doesn't work even If there are correct paths to images

Any ideas?

Upvotes: 0

Views: 149

Answers (3)

Saravana Ganesan
Saravana Ganesan

Reputation: 41

We can load the images through "CSS" class name.

var icons = {
                header: "plus",
                activeHeader: "minus"
            };

CSS are:

<style>
        .plus
        {
            background-image:url(../../img/plus.png);
        }
        .minus
        {
            background-image:url(../../img/minus.png);
        }
    </style>

Upvotes: 1

Praveen
Praveen

Reputation: 56519

jQuery accordion UI already has its default + and - icons.

This can be activated using 

icons: {
            "header": "ui-icon-plus",
            "activeHeader": "ui-icon-minus"
        }

from docs, "active" can be a bool or int 0 and 1. since your code returns numeric, you can follow what reyaner said.

 active: parseInt(active_item)

Finally your accordion code should be like 

$(".accordion").accordion({
        collapsible: true,
        active: parseInt(active_item),
        heightStyle: "content",
        icons: {
            "header": "ui-icon-plus",
            "activeHeader": "ui-icon-minus"
        }
    });

Check this JSFiddle

Upvotes: 1

reyaner
reyaner

Reputation: 2819

i cant help you with the icons, but for the active element, parse it to Int

active_item = parseInt(active_item)

ah and for the icons, dont you have to set a class, not a path?

Upvotes: 1

Related Questions