Support » Plugin: Accordion Shortcodes » /- when opened or closed

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author philbuchanan

    (@philbuchanan)

    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!

    Plugin Author philbuchanan

    (@philbuchanan)

    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";
    }
    Thread Starter ginobrugman

    (@ginobrugman)

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

    Plugin Author philbuchanan

    (@philbuchanan)

    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

    (@ginobrugman)

    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

    Plugin Author philbuchanan

    (@philbuchanan)

    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

    (@ginobrugman)

    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

    (@philbuchanan)

    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("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?

    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.

    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

    (@philbuchanan)

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