Title: /- when opened or closed Last modified: August 24, 2016 --- # /- when opened or closed * Resolved [ginobrugman](https://wordpress.org/support/users/ginobrugman/) * (@ginobrugman) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/) * Hello, * How do I add a + which changes to a – when you open the accordion, and the other way around? * Kind regards * [https://wordpress.org/plugins/accordion-shortcodes/](https://wordpress.org/plugins/accordion-shortcodes/) Viewing 15 replies - 1 through 15 (of 15 total) * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6151811) * Adding this to your theme’s `style.css` file should work: * ``` .accordion-title:after { content: "+"; float: right; } .accordion-title.open:after { content: "\2211"; } ``` * [donmcleman](https://wordpress.org/support/users/donmcleman/) * (@donmcleman) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6151876) * Hi, Phil, what a wonderful plugin. I came to this forum to ask two questions and you’ve already answered one. I’ll have a look for the other in a moment. * By the way, on my PC the code for the minus symbol is incorrect. I’ve simply typed in an em dash into the CSS file (ALT +0150). * Thank you! * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6151897) * You’re right [@donmcleman](https://wordpress.org/support/users/donmcleman/)! The proper code should be `\2212` I believe. That should get you the proper minus sign. Too many 1s and 2s… * The full, proper code should be: * ``` .accordion-title:after { content: "+"; float: right; } .accordion-title.open:after { content: "\2212"; } ``` * Thread Starter [ginobrugman](https://wordpress.org/support/users/ginobrugman/) * (@ginobrugman) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6151940) * You sir. You are the best! * I’ve got one more question. * I’ve got this code to create a line after the item title. * _[ Moderator note: code fixed. Please wrap code in the backtick character or [use the code button](http://codex.wordpress.org/Forum_Welcome#Posting_Code).]_ * ``` .accordion-title { font-size: 1em; margin: 0 auto 30px; clear: both; background: transparent url(images/line.gif) 0 center repeat-x; background-color: #f2f2f2; background-position: 10% 0%; color: #dd8463; text-align: left; font-family: "Droid Serif", "Georgia", serif; width: 95%; text-transform: uppercase; cursor: pointer; } ``` * It works, but it also goes under the item title.. How can I make it so the line starts after the item title? * Kind regards! * _[ [No bumping please](http://codex.wordpress.org/Forum_Welcome#No_Bumping). ]_ * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152040) * I’m not entirely sure what you are trying to achieve here. What do you mean by adding a line after the title? Is it possible for you to link to an image of what you’re trying to achieve? * Thread Starter [ginobrugman](https://wordpress.org/support/users/ginobrugman/) * (@ginobrugman) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152061) * Als you can see in the image enclosed. * The line in the accordion title (line.gif) Actually goes under the title and the +/- * How can i fix it so starts after the accordion title and stops before the +/- * [Image](http://postimg.org/image/p28ee6z9x/) * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152071) * That’s much more difficult to achieve. I’m not 100% sure. This might help you get started though: * ``` .accordion-title { display: table; white-space: nowrap; padding-right: 50px; } .accordion-title:after { border-top: 1px solid green; content: ""; display: table-cell; position: relative; top: 0.5em; left: 10px; width: 100%; } ``` * Then, instead of using a background image for the rule, use one for the plus and minus sign: * ``` .accordion-title { background-image: url("closed.png"); background-position: right centre; background-repeat: no-repeat; } .accordion-title.open { background-image: url("open.png"); } ``` * Thread Starter [ginobrugman](https://wordpress.org/support/users/ginobrugman/) * (@ginobrugman) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152112) * Hmm. That doesn’t seem to fix it. * I just need to archive this as a accordion title * Title ———————————— + * I hope this makes more sense * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152113) * If that didn’t work, I’m not sure I can be of any more help. Sorry. * [DavidSortOf](https://wordpress.org/support/users/davidsortof/) * (@davidsortof) * [10 years, 11 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152207) * Thanks so much for the code on this thread, and a great, versatile plugin! * Here’s what I used for [this page](http://www.davidweiss.net/test/): * ``` .accordion-title:before { content: url("http://www.davidweiss.net/wp-content/uploads/2015/06/plusdw2.png"); float: left; } .accordion-title.open:before { content: url("http://www.davidweiss.net/wp-content/uploads/2015/06/minusdw2.png"); } ``` * From here I want to do something subtle; I’d like to move the title just a pixel or two to the left relative to the icon, but if I tweak the padding, the icon moves as well. * Any ideas for moving the title closer to the icon? * [DavidSortOf](https://wordpress.org/support/users/davidsortof/) * (@davidsortof) * [10 years, 11 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152209) * Ah! Re: my last reply, I figured it out: * ``` .accordion-title:before { content: url("http://www.davidweiss.net/wp-content/uploads/2015/06/plusdw2.png"); float: left; margin-right: -3px; } ``` * Note: You don’t have to change the `.accordion-title.open:before` block. * [mktngguy](https://wordpress.org/support/users/mktngguy/) * (@mktngguy) * [10 years, 10 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152237) * Hi Phil. * Thanks for the CSS code to display the plus and minus signs after the titles. * Have I overlooked it in a thread somewhere, or is there code for placing them* before* the titles? * Thanks in advance. Nice plugin. * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [10 years, 10 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152238) * You can use `.accordion-title:before {}` to add styles before the title text. * [mktngguy](https://wordpress.org/support/users/mktngguy/) * (@mktngguy) * [10 years, 10 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152239) * Thank you. That did the trick. * [JovanM](https://wordpress.org/support/users/jovanm/) * (@jovanm) * [10 years, 9 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152240) * Hi, I have little prob. with the headings in accordion, they are little bit to the left compare to other center text on web page. Here is the live site – [http://astrazlata.rs/](http://astrazlata.rs/) My code look like this: * .accordion-title:before { text-align:center; margin: 0 auto; } * .accordion-title:after { content: “+”; float:right; margin-right: 60px; } * .accordion-title.open:after { content: “\2212”; } * Only code that make accordion headings look more center is: * accordion-title:after { content: “+”; float:right; margin-right: 15px; } * .accordion-title.open:after { content: “\2212”; } * Is there any better solution? * Thank you, Jovan Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘/- when opened or closed’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/accordion-shortcodes.svg) * [Accordion Shortcodes](https://wordpress.org/plugins/accordion-shortcodes/) * [Frequently Asked Questions](https://wordpress.org/plugins/accordion-shortcodes/#faq) * [Support Threads](https://wordpress.org/support/plugin/accordion-shortcodes/) * [Active Topics](https://wordpress.org/support/plugin/accordion-shortcodes/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/accordion-shortcodes/unresolved/) * [Reviews](https://wordpress.org/support/plugin/accordion-shortcodes/reviews/) * 15 replies * 6 participants * Last reply from: [JovanM](https://wordpress.org/support/users/jovanm/) * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/when-opened-or-closed/#post-6152240) * Status: resolved