How can I add plus minus symbol to CSS Accordion

accordion, css, javascript, jquery

Solution

Add a pseudo class:

content:"+";

And some js like so:

http://jsfiddle.net/Na5FY/2/

OR

just use JQuerys UI method:

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

http://jsfiddle.net/4M6vH/3/

Problem

The original accordion is by Jasson Qasqant on Codepen. Here is my version: http://cdpn.io/kaHeo I would like to add a plus minus similar to this: http://codepen.io/auginator/pen/tCwDc Can someone please help me, nothing I've tried worked and I've never written JS before so I was hoping to copy the functions but it's not working. All tested suggestions welcome. I would need a working example as I don't know how to implement the JS so it works with the CSS and HTML. Thank you!

Original source