asked on

How To Make HTML Accordion Code Display When The Web Page Has A Background Color?

I am using a HTML Accordion Code that functions and works perfect!! The challenge I have is the web page I need to put it on has a "Back-Ground" Color. When I test the Accordion on the page, I click the Plus sign and the small white box opens, BUT you CAN NOT see the text displayed.
When I test the same code on a web page that that has NO Back-Ground color, I can see the text displayed.
Also, if I am using Squarespace and have a "Back-Ground" IMAGE, I have the same problem. Can the HTML Accordion Code work over a Back-Ground Image???
I have supplied the HTML Code below.
Can this problem be fixed???? Any help would be greatly appreciated!
Thank you...
Rick

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  font-color: #ffffff;
  background-color: #021425;
  color: #ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #1d82e2;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
font-color: black;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">Packaged Devices Distribution</button>
<div class="panel">
  <p>JAN/TX/V/S Discrete 1N, 2N
</p>
<p>Passives (R, C, L)
</p>
<p>Integrated Circuits (ICs)
</p>
<p>Modules
</p>
</div>

<button class="accordion">Bare Die Distribution</button>
<div class="panel">
<p>Discrete 1N, 2N Die
</p>
<p>Passives (R, C, L)
</p>
<p>Integrated Circuits (ICs)
</p>
<p>Packages
</p>
</div>

<button class="accordion">ESC Brand Products</button>
<div class="panel">
<p>MIL-PRF-38535 /883 Certified
</p>
<p>MIL-PRF-19500 Screen
</p>
<p>Hermetic Packaging
</p>
<p>Siliconix Inside
</p>  
<p>Analog Switches
</p>
<p>MOSFETs/JFETs
</p>
<p>1N/2N Arrays
</p>
</div>

<button class="accordion">Custom Packaging</button>
<div class="panel">
<p>MIL-PRF-38535 Screen
</p>
<p>MIL-PRF-19500 Screen
</p>
<p>Custom SCD Screen
</p>
<p>Hermetic Packaging
</p>  
<p>Eutectic/Epoxy attach
</p>
<p>Au/Al wire bond
</p>
<p>Obsolete Die Inventory
</p>  
<p>1N/2N Arrays
</p>
</div>

<button class="accordion">Value-Add Services</button>
<div class="panel">
<p>VMI
</p>
<p>Kitting
</p>
<p>Die Bank
</p>
<p>Wafer Processing
</p>  
<p>Element Evaluation
</p>
<p>Tin/Lead Solder Dip
</p>
<p>Solder Re-certification
</p>  
<p>COTS Up-Screen
</p> 
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

Is there something in the HTML Accordion Code that can be added to fix this??

Open in new window

Julian Hansen

I cannot see the problem.
I put your code in this Fiddle https://jsfiddle.net/c5pLh1vk/ and set the background of the page to red.
Accordion is unaffected.

ES-Components

ASKER

Julian,
Thanks for the quick response. Perhaps it is a Squarespace problem. On the page that I am using, they allow us
to use a "Back-Ground" image. Try this link to see what the Accordion does. https://www.escomponents.com/new-index-1
If I use NO Back-Ground image the Accordion works fine. It just seems to me that the .panel section in the code
is just not showing the text. Any thoughts?????

Julian Hansen

Still not seeing the problem - the link you posted shows a page with a white background - when you expand the accordion - white background dark text.

I set the body background color to blue - didn't change anything on the accordion. Do you have an example of where the background is the problem?

ES-Components

ASKER

Sorry about that. I reset the page. Here is the link: https://www.escomponents.com/new-index-1

It's called an index page in Squarespace. The background for the page is an image. (DarkBlue.png)

Supposedly, Squarespace says you can try to use a css code in Squarespace instead of the background-image.
Not sure if this will work. See below. Not sure about this as I have not tried yet.

.collection-type-index #new-index-1
{background-color:#cccccc;}

This Squarespace website software is beyond my programming capabilities Just seems there should be an easy way.

Thanks...
Rick

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ES-Components

ASKER

Julian------ YOU ARE THE BEST!!!!!!!!!! I knew there was an easy way, just couldn't figure it out.
I just fixed the Accordion code #000 and it WORKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thank you again so much for your patience, quick response and HELP!!!!!!!

Rick

Julian Hansen

You are most welcome. Don't forget to close your question.