troubleshooting Question

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

Avatar of ES-Components
ES-ComponentsFlag for United States of America asked on
HTML
7 Comments1 Solution11 ViewsLast Modified:
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??
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros