The original accordion is by Jasson Qasqant on Codepen.

Here is my version:

I would like to add a plus minus similar to this:

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!

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!

• javascript
• jquery
• css
• accordion

• Did you write the js to open and close the containers? – lharby Commented Aug 13, 2013 at 13:26

2 Answers 2

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/

http://jsfiddle.net/vkdzuqex/8/

There is some code I busted out, using all css to generate this element, to make the minus, just take away the :after...

.plus {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid #B4B4B4;
}
.plus:before {
  content: '';  
  width: 25px;
  height: 1px;
  border-top: 1px solid #B4B4B4;
  display: block;
  position: absolute;
  margin-top: 15px;
  margin-left: 3px;
}
.plus:after {
  content: '';  
  width: 1px;
  height: 25px;
  border-right: 1px solid #B4B4B4;
  display: block;
  position: absolute;
  margin-top: 3px;
  margin-left: 14px;
}

<div class="plus"></div>