Jump to content


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


Accordion transparent background

Recommended Posts




How do I do a accordion with a transparent background? 


FOr example, using this code (from http://demo.pagelines.me/tools/):



  1. [pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
  2. Content 1
  3. [/pl_accordioncontent][pl_accordioncontent name="accordion" number="2" heading="Title 2"]
  4. <img class="pl-imageframe" src="http://placekitten.com/285/125" alt="" />
  5. [/pl_accordioncontent]
  7. [/pl_accordion]


The following didn't work with the div is put on either side. Nor does bg-color:

<div style="background: rgba(255, 255, 255, 0.0);"></div>

Share this post

Link to post
Share on other sites

The correct way to do this is to add CSS styling to the element. 


I recommend using Firebug or your browsers built-in web dev tools and inspect the Accordion sections to find the correct code.


For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 


Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post

Link to post
Share on other sites

Oh  thanks for that. :) HUGELY APPRECIATED! That is an amazing tool (in Chrome).


However, I can't get it to select the element I want to work with. 


How do I implement the code on the page or through pagelines > site options > custom CSS?



element.style {
  1. background-colorrgba(255, 255, 255, 0.0);

Share this post

Link to post
Share on other sites

Wrap the entire accordion code into a div with a unique class as below:

  1. <div class="myownaccordion">
  2. [pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
  3. Content 1
  4. [/pl_accordioncontent][pl_accordioncontent name="accordion" number="2" heading="Title 2"]
  5. <img class="pl-imageframe" src="http://placekitten.com/285/125" alt="" />
  6. [/pl_accordioncontent]
  7. [/pl_accordion]
  8. </div>

Then, apply your CSS to the unique class:

.myownaccordion {

background-color: transparent;


Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Had to dig into the CSS to get a transparent accordion working on DMS.


Two classes to style were:





If you use a rgba background you can get nice effects if you have a background beneath it like:

.accordion-group {
  background: rgba(255, 255, 255, 0.2);
  border: none;}

.accordion-heading {background: rgba(255, 255, 255, 0.3);
  border: none;}

Share this post

Link to post
Share on other sites

Thanks for sharing that grahamd79! :)

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

  • Similar Content

    • 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?
    • jagipson
      By jagipson+
      I am trying to make a header like the following site: http://www.nd.edu/
      They have their logo with a blue and yellow bar. Above the blue bar its actually transparent. You can see the image underneath of the building. How can I accomplish this with the Fixed section on DMS? I just started the build here:  http://recruiterwebsitedesign.com/polymer/
      When I scroll down the bar in transparent but the top is white which looks like its the site wrap background. How can accomplish this?
    • lmillslagle
      By lmillslagle
      Hi, I'm using the accordion shortcode on this page: http://actonline.org/releases/
      And it works well for the first ten items and item 20, but it won't open 11-19.
      I checked the shortcodes and the non-working ones match the working ones (aside from the number and heading). I tried deactivating all plugins and still no dice. Any idea what the issue is?
    • webmktco
      By webmktco
      I'm hoping I can get some help w/ an accordion.
      Go to http://the-handyman-company.myddsweb.com/our-services/handyman-services/and you'll see some spacing issues:

      Here's the code (i've tried using the pl_raw tags):
      <div class="accordion" id="accordion"> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse1" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Handyman Jobs">Handyman Jobs</a> </div> <div class="accordion-body collapse in" id="collapse1"> <div class="accordion-inner"> <p>Whatever needs to be repaired or installed, an experienced handyman is only a phone call away. Bring us in for any odd jobs you have waiting on your to-do list.</p> <a class="btn btn-default btn-large" title="Handyman Jobs" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/handyman-jobs/">More about Handyman Jobs <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse2" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Drywall">Drywall</a> </div> <div class="accordion-body collapse" id="collapse2"> <div class="accordion-inner"> <p>Call our team to repair any damages to your drywall and give your home a fresh and professional look. We are unmatched experts in drywall installation and repair.</p> <p class="center"><a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/tampa/tampa-drywall-contractors/" title="Tampa Drywall Contractors">Tampa</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/clearwater/drywall-contractors/">Clearwater</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/orlando/drywall-contractors/">Orlando</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/sarasota/drywall-contractors/">Sarasota</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/ft-myers/drywall-contractors/">Ft. Myers</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/melbourne/drywall-contractors/">Melbourne</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/jacksonville/drywall-contractors/">Jacksonville</a></p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse3" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Carpentry">Carpentry</a> </div> <div class="accordion-body collapse" id="collapse3"> <div class="accordion-inner"> <p>When done correctly, carpentry should be able to endure through many years. Our professional work will not disappoint you. Call us for all of your building needs.</p> <p class="center"><a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/tampa/carpenter" title="Tampa Carpenter">Tampa</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/clearwater/carpenter" title="Clearwater Carpenter">Clearwater</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/orlando/carpenter" title="Orlando Carpenter">Orlando</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/sarasota/carpenter" title="Sarasota Carpenter">Sarasota</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/ft-myers/carpenter" title="Ft. Myers Carpenter">Ft. Myers</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/melbourne/carpenter" title="Melbourne Carpenter">Melbourne</a> <a class="btn btn-default btn-large margin-bottom" href="http://the-handyman-company.myddsweb.com/jacksonville/carpenter" title="Jacksonville Carpenter">Jacksonville</a></p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse4" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Soffit / Fascia">Soffit / Fascia</a> </div> <div class="accordion-body collapse" id="collapse4"> <div class="accordion-inner"> <p>Structural problems can make your home vulnerable to leaky roofs and unwelcome critters.  For quality you can trust, bring in our expert team to repair and maintain your soffits and fascia.</p> <a class="btn btn-default btn-large" title="Soffit / Fascia" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/soffit-fascia-and-decks/">More about Soffit / Fascia <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div>  <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse5" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Doors &amp; Windows">Doors &amp; Windows</a> </div> <div class="accordion-body collapse" id="collapse5"> <div class="accordion-inner"> <p>Contact us when you need someone to reseal old doors and windows or install new ones. You can cut down on your power bill, bring extra sunlight into a dark room, or just give your home a new look.</p> <a class="btn btn-default btn-large" title="Doors &amp; Windows" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/doors-and-windows/">More about Doors &amp; Windows <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div>   <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse6" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Tile Floors">Tile Floors</a> </div> <div class="accordion-body collapse" id="collapse6"> <div class="accordion-inner"> <p>For a durable and sophisticated look, consider ceramic tiles. Our professional installation will give you a floor that lasts for years to come.</p> <a class="btn btn-default btn-large" title="Tile Floors" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/tile-repair/">More about Tile Floors <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse7" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Painting">Painting</a> </div> <div class="accordion-body collapse" id="collapse7"> <div class="accordion-inner"> <p>Even an older home can be livened up with well-maintained walls and a new coat of paint.</p> <a class="btn btn-default btn-large" title="Painting" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/painting-and-drywall/">More about Painting <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse8" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Fencing">Fencing</a> </div> <div class="accordion-body collapse" id="collapse8"> <div class="accordion-inner"> <p>Whether you want a privacy fence in your backyard, front yard fencing that improves your curb appeal, or just a simple structure that keeps in pets or children, you can trust the quality you receive when we do your fencing.</p> <a class="btn btn-default btn-large" title="Fencing" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/carpentry-and-fencing/">More about Fencing <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading pl-contrast"> <a href="#collapse9" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle" title="Shelving, Lighting &amp; Fans">Shelving, Lighting &amp; Fans</a> </div> <div class="accordion-body collapse" id="collapse9"> <div class="accordion-inner"> <p>Your bedroom, family room, or home office has a lot of potential, and we can turn your vision into a reality. Contact us about installing ceiling fans, shelves, or assembling new furniture and equipment.</p> <a class="btn btn-default btn-large" title="Shelving, Lighting &amp; Fans" href="http://the-handyman-company.myddsweb.com/our-services/handyman-services/lighting-and-fans/">More about Shelving, Lighting &amp; Fans <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> </div>
    • kwp4petar
      By kwp4petar
      Hi, i'm trying to get the hover background to be completely transparent.  The closest i've gotten so far is using a 75% opacity grey box I made in photoshop and set that as a background-image:
      .jgHover figure {
        background-image: url("...");
      but that only changed one of the hover 'tiles', and even then the transparency revealed a blue (and now grey) box behind it.  
      My goal here is to have a 100% transparent box with a 2px white outline and the header showing, and that's it.  Then it behaves like normal with showing the content.
      Another question I have is: How do I know what a good image size is to use for this section?

      On your site you have a beautiful 3x3 layout of your staff with no spacing in between what so ever, each having a unique animation. How was that accomplished? Was special padding customizations used?
      Also, when I played with the animations on first installing the section, I noticed that the image gets a grey 'overcast'(?) over it.  Here's an image below using the Niall animation on the far left, while the other two remain as Charlie:

      (side question: what is the default size image being used here?)