Jump to content


Photo
Accordions

Accordion: How to use custom css class for accordions?



Best Answer ellenmva , 22 May 2014 - 03:12 PM

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

 

Best,

 

Ellen

Go to the full post


  • Please log in to reply
12 replies to this topic

#1 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 21 May 2014 - 11:46 AM

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



#2 ellenmva

ellenmva

    Advocate

  • Members

  • 330 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 21 May 2014 - 03:10 PM

@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



#3 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 21 May 2014 - 03:52 PM

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.



#4 ellenmva

ellenmva

    Advocate

  • Members

  • 330 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 21 May 2014 - 04:58 PM

@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



#5 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 21 May 2014 - 07:49 PM

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! 



#6 ellenmva

ellenmva

    Advocate

  • Members

  • 330 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 22 May 2014 - 03:12 PM   Best Answer

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

 

Best,

 

Ellen



#7 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 30 May 2014 - 12:25 PM

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?



#8 ellenmva

ellenmva

    Advocate

  • Members

  • 330 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 30 May 2014 - 01:19 PM

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

#9 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 30 May 2014 - 02:10 PM

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

it has found this warning...

 

i could email you the page url



#10 ellenmva

ellenmva

    Advocate

  • Members

  • 330 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 30 May 2014 - 02:23 PM

@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



#11 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 30 May 2014 - 02:38 PM

done!



#12 ellenmva

ellenmva

    Advocate

  • Members

  • 330 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 30 May 2014 - 07:12 PM

@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



#13 basmati

basmati

    Advocate

  • Members
  • 264 posts
  • Framework Version:PageLines Framework (always the latest)
  • Country: Country Flag

Posted 05 June 2014 - 01:09 PM

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





Also tagged with one or more of these keywords: Accordions