Jump to content


This topic is now archived and is closed to further replies.


Change nested accordion title background color

Recommended Posts


Hi Ellen, 


I'm sure this is such a basic question but I can't seem to solve this issue myself so I'm hoping you might help me with it. 

I have a nested accordion on this page: www.noelgroup.ie/home/ 

You need to click the button (Not the image) on 'how we work at the Noel Group' to activate it. 

I simply want to change the title background colour. In firebug I can see the RGB and make the change there, (I want to change it to #ffffff ) but my efforts to target it with custom css have been a bit of a flop. 


If you could point me in the right direction I would be really grateful. 


Thanks a million, 


Share this post

Link to post
Share on other sites

HI gavred

Please, you can try with


.section-accordions .accordion-heading { 
background: red !important;}
You can change red for your color.

Life is too short to remove USB safely ...

Share this post

Link to post
Share on other sites

Hiya Batman, 


Thanks a million for the message. Unfortunately, that one doesn't seem to have done it either. I can't understand why to be honest. I've left it in the custom css regardless but i can't seem to make any change regarding the css for the nested accordion. Its strange one. 


Thanks for trying to help. I really appreciate it. 

Share this post

Link to post
Share on other sites

gavred You can control the title background color by adding accordion_background="#ffffff" to the accordions shortcode that you created. Now, the hover will still show up, it will be a light gray. If you don't want that you will need to add an accordions_id to the shortcode to target the css. So your shortcode would look something like

[accordions accordion_set="group-companies" accordions_id="work" accordion_background="#ffffff"]

Then if you want to get rid of the hover put this CSS is the Custom --> Custom LESS/CSS box.

.accordions-work .accordion-heading:hover {
  background: #ffffff !important;

That should work, if not I'm just not targeting the right class. Let me know how it works out.





Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post

Link to post
Share on other sites

@ellenmva you rock! Thank you so much. :P That was perfect. 

Share this post

Link to post
Share on other sites

  • Similar Content

    • petere21
      By petere21+
      As I understand El Sues Accordions section is broken. Simon solved this problem by fixing section and we need to download it again.
      But in my account in download area there is no accordions section to download. Where can I download it? !!! Asap please my web is broken.
    • balfred1345
      By balfred1345
      I'm using El Sue's Accordion plugin  V1.7.4 in DMS2 using WP 4.4.1.
      I've created a set "Jobs2", and selected three accordions for the set. Here's a screen shot: http://screencast.com/t/MXYR9p1QoEAo
      The "accordion set to show" selection box no longer works, and all accordions I've made are showing instead of the set "Jobs2"  You can see this here: http://whub34.webhostinghub.com/~videoh6/cidev2.com/jobs-at-piepho/
      I've deactivated all plugins to see if there was a conflict, and there does not seem to be one, as the accordion selector problem persists even with plugins off. 
      Can you please tell me how to fix this so the "accordion set to show" selector works again?
    • chamois_blanc
      By chamois_blanc+
      All accordion entries are shown every time, independently of the set selected. See example here:
      The first accordion should only show the 2nd and 3rd entries, instead of all of them. The second accordion should only show the 1st entry.
      Please fix asap! I haven't changed anything to my content in a few weeks and it was working fine before. I am guessing this appeared in one of the latest DMS updates. I am going to use some CSS to try to hide the undesirable entries.
    • balfred1345
      By balfred1345
      Hi Ellen,
      I've tried every way I could think of to use CSS to get rid of what I assume is padding or margin from the top of the accordion section so that it can be closer to the <p> above it. 
      Here's a screenshot of the way it looks now:  http://screencast.com/t/2c66f6y0dex
      If you'd like to look at the page please see: http://whub34.webhostinghub.com/~videoh6/cidev2.com/moving-services/mankato-mn-movers/
      I'd like to have the accordion section with the word "More" much closer to the paragraph line above it. If you look at the CSS you'll see several instances where I put in margin: 0 !important; and padding: 0 !important.
      Can you please tell me how I can adjust the section so it is closer to the paragraph above it?
      This site is on latest versions of DMS 2 and WP. 
      Many thanks,
    • flourishdesignstudio
      By flourishdesignstudio+
      I wanted to let the community know that there is a problem that has happened on a couple of DMS sites that we manage. The problem is that there are certain plugins/sections that DMS uses (such as 'Accordions' and 'Sidekick') that will appear to have an update. However, when you actually update the plugin it is replaced but a similarly named plugin. Here are the original plugins:
      Original: http://dms.elsue.com/accordions/ (authored by @ellenmva)
      Replaced with: https://wordpress.org/plugins/accordions/
      Original: http://www.pagelines.com/shop/third-party-extensions/sidekick/ (authored by Evan Mattson)
      Replaced with: https://wordpress.org/plugins/sidekick/
      I just wanted to know if there is anything I can do to make sure that other plugins/sections do not get replaced when I update them in the future as well as bring it to the DMS community's attention so that others do not experience the same confusion and frustration. Any thoughts would be very welcome in order to avoid this in the future.