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!
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With