Using Custom Formatting for Trigger Text as a Header

  • Resolved annacunningham91

    (@annacunningham91)


    7 years, 2 months ago

    Hi there,

    I am trying to use Collapse-O-Matic to collapse two sections of the page I linked to above – with the “15-DAY” header and “9-DAY” header acting as the trigger texts, and the text below them (FEES + COMMUNITY CONTRIBUTION and PROGRAM DATES) as the hidden content.

    I’m trying to format the trigger text so that it looks like the formatting we currently use for those headers on our website (except with the addition of an arrow next to them, and the option to click to make the section below collapsible). For example, the html for this part on another page looks like this:

    <div style=”padding: 10px; background-color: #e2e2e2; line-height: 1.4;”>
    <h5 style=”text-align: center;”>9-DAY</h5>
    </div>

    I have tried playing with the CSS for the trig class in our plugin, I’ve tried going through all of the documentation extensively, and I’ve been playing with the code for this for a while, but I’m a beginner and can’t seem to get the formatting right for these headers/trigger texts while also ensuring the section below is collapsible. Do you have any suggestions for how I could implement this?

    Thanks!
    -Anna

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author twinpictures

    (@twinpictures)

    Make sure your default tag is set to use a div, rather than a span element. This can be set under Dashboard > Settings > Collapse-O-Matic > Default Tag

    Next, you might not need to wrap the title in a h5 element, but simply add that font style to your trigclass:
    The Shortcode

    [expand title="9-DAY" trigclass="super_duper_trigclass"]hidden content[/expand]

    The CSS

    .super_duper_trigclass {
    padding: 10px;
    background-color: #e2e2e2;
    line-height: 1.4;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    If it’s just the two boxes, you might also consider using the roll-your-own method but try the first example above.

    If you would like us to set this up for you, we offer a very high level of personal support with Collapse-Pro-Matic that would cover that.

    Thread Starter annacunningham91

    (@annacunningham91)

    That worked beautifully, and I was able to play with the rest of the CSS to get it looking how I want! Thank you so much for your help!

    Plugin Author twinpictures

    (@twinpictures)

    happy to hear everything worked out.
    If you are happy with the plugin and its support, consider leaving a little review! Thank you for marking this issue as resolved.

    Hi – this was amazing for getting me started! A bit new to CSS too!

    I’ve managed to alter the collapsible header the help above but I want to be able to alter the expandable area too. Is that possible?/how do i do this?

    So far I have:

    [expand title=”Amy Test” trigclass=”Illingworth_trigclass”]”Amy’s test content[/expand]

    .Illingworth_trigclass {
    padding: 10px;
    background-color: #d1d1d1;
    line-height: 1.4;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    text-colour: white;
    letter-spacing: 1px;
    }

    Thank you for your help – also my text colour change doesn’t appear to be right either so any help with that appreciated too – sorry thats probably really basic stuff!

    Thanks, Amy

    ignore this worked it out thanks ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Using Custom Formatting for Trigger Text as a Header’ is closed to new replies.