Accordion Headers Formatted Incorrectly for Last 4 of 11

  • Resolved llooten

    (@llooten)


    7 years, 8 months ago

    Hello Phil,

    We really LOVE the plugin and I’m finally making proper use of it on our website. For our page peakbrain.com/research-new, we want to have 10+ accordion items but no matter how I clean it up, the last 4 headers are not formatting correctly. Is there a max number of items we can have?

    Things I’ve tried/determined:
    – This issue is persistent across different browsers.
    – I tried creating two accordions in the same page, but that didn’t correct the issue.
    – I moved the last 4 to a new page and they worked perfectly.

    Thanks for any help you can provide!

    • This topic was modified 7 years, 8 months ago by llooten.
Viewing 1 replies (of 1 total)
  • Plugin Author philbuchanan

    (@philbuchanan)

    There is no limit to the number of items you can use. I think your issue is with the CSS styling of your headings. You seem to be using the following selectors: 

    #accordion-1-t1,
#accordion-1-t2,
#accordion-1-t3,
#accordion-1-t4,
#accordion-1-t5,
#accordion-1-t6 {
  ...
}

    Those will style the first 6 items only (not the t6 part). I would suggest instead using a selector like:

    .accordion .accordion-title {
  background-color: #F1F1F1;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 25px;
}

    to select all your headings, no matter how many there are and how many accordion groups you use.

    Alternatively, you can keep adding t7, t8, t9, t10 etc. However, this will require you to keep adding additional css selectors every time you want to add a new title. So I’d just go with the first option.

Viewing 1 replies (of 1 total)
  • The topic ‘Accordion Headers Formatted Incorrectly for Last 4 of 11’ is closed to new replies.

Tags