/- when opened or closed

Adding this to your theme’s style.css file should work:

.accordion-title:after {
    content: "+";
    float: right;
}

.accordion-title.open:after {
    content: "\2211";
}

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!

You’re right @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";
}

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. ]

.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. ]

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?

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

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");
}

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

If that didn’t work, I’m not sure I can be of any more help. Sorry.

Thanks so much for the code on this thread, and a great, versatile plugin!

Here’s what I used for this page:

.accordion-title:before {
content: url("https://www.davidweiss.net/wp-content/uploads/2015/06/plusdw2.png");
float: left;
}
.accordion-title.open:before {
content: url("https://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?

Ah! Re: my last reply, I figured it out:

.accordion-title:before {
content: url("https://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.

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.

You can use .accordion-title:before {} to add styles before the title text.

Thank you. That did the trick.

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 – https://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