• 0

Accordions Accordion: How to use custom css class for accordions?

Question

Posted · Report post

Hi Ellen,

I'd like to have accordions from different categories and with different colors on one page.

Is it possible to use the category as css class and than style each accordion class with different color settings?

 

Perhaps a better solution would be:

a custom class for each accordion category in the backend - like on pageliens boxes.

 

any ideas for a smart solution?

 

if there isn't an easy way: how much do you charge for adding a css class box into the accordion php template?

 

Greetings, peter

Share this post


Link to post

12 answers to this question

  • 0

Posted · Report post

basmati Thanks for understanding. Let me know if you do run into any difficulties with the cloning method.

 

Best,

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

basmati Just to clarify what you would like, you have different accordion sets on a page and you want to target each accordion set individually and give each accordion in the set a different color?

 

If you want each set category to be a different color that's already part of Accordions in the PageLines Setting Panel for each Accordion Group you have on the page.

 

And, also you are using PageLines Framework, correct?

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

Ellen, yes thats right!

 

we need about 4 different accordion colors and they change several times in a year - for different events (each event slot has its own color design).

 

as far as i understand it i could clone the accordion section 4 times and than select the colors for each clone - in the accordion pagelines meta settings on the selected page.

but that would be a little confusing for some of the page editors. the editor has to look for the right clone of accordion sets and select the one with the right color. and than select the right accordion category. thats possible but confusing.

 

so, the easiest way would be to have a field in the pagelines metasettings - to fill in a css color class - for example:

.ret, .blue, .yellow, .pink (... and thats possible with pagelines boxes...)

 

i hope you understand what i mean!?

 

... using PageLines Version 2.

Share this post


Link to post
  • 0

Posted · Report post

basmati See PageLines Boxes don't have you setting the colors in the options so it has a class so you can change the styling. With DMS it is an option with every section to have a class, Framework didn't setup that way and right now I am just making bug changes on Framework products. And, is it one accordion set on the page or 4? Still a bit confused. 

 

Also, the colors are inline and the hover works off of them too. So if I can add a class for you all your css is going to have !important on it to override the inline styles. Not pretty.

 

Let me see how long it would take to make that change, add the field and add the class to the html. If it is something simple then I will just add it, if not we can talk about customizing it for your needs.

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

understand! i now tested to clone the accordion section and than use the ones i need and hide the others.

i think this will work. thanks for your answer and help! 

Share this post


Link to post
  • 0

Posted · Report post

ok, one more thing: by default only one accordion should be open at the same time - right?

its not working on pages with different cloned accordions. ... could that be a jQuery conflict?

Share this post


Link to post
  • 0

Posted · Report post

It could be a conflict, if you use Chrome Developer Tools you would see the error in the console.

Otherwise, do you have a link to the site I can look at by chance?

Ellen


Sent from my iPad using Tapatalk

Share this post


Link to post
  • 0

Posted · Report post

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

it has found this warning...

 

i could email you the page url

Share this post


Link to post
  • 0

Posted · Report post

basmati Yes, that's just a warning so that's not it. Still could be a conflict.

 

If you click on my image you can send me a private message with the link. That would be great.

 

Thanks.

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

done!

Share this post


Link to post
  • 0

Posted · Report post

basmati I took a look at the site and the problem is that each accordion set is a separate entity, only within the Accordion Set will the accordion shut when the next one is open. So, if the accordions are all in the same set in the one Accordion section then they would open and close.

 

I don't know if there is any easy way around that problem with what you are trying to accomplish. Let me look at it over the weekend, I might be able to give you a small function, either that or I break down and add the ability to add a custom class to the accordion and you can add css to target that class, your original request.

 

Best,

 

Ellen

Share this post


Link to post
  • 0

Posted · Report post

adding classes would be great - but i suppose you haven't found an easy solution during the weekend?

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now