Changing style (colour) of html accordion 
Autor: Paul W.I have created an accordion at http://www.jpw.ca/protect-and-grow.html
using the code below. It works fine. Question: How do I change the style or the colour of the chart to brown to match the site? Is it code or within the program?
Help please
Paul
<meta charset="utf-8">
<title>jQuery UI Accordion - Fill space</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#accordion-resizer {
padding: 10px;
width: 350px;
height:auto;
}
#accordion{
text-align:left!important;
font-family: 'open sans';
</style>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
</script>
<div id="accordion">
it is inside /resources/demos/style.css
you need to change the color inside that style.css file
did you import that css?
Autor
Yes I did from https://jqueryui.com/accordion/
you did not change body color inside that style sheet, the code you have here has nothing to do with color setting, open the style.css with notepad or wordpad, the change the following:
body {
background-color: #eee;
Also these codes needs to be placed before closing the head section of your website and not in the body section
<linkrel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><linkrel="stylesheet" href="/resources/demos/style.css">
<script> $(function() { $( "#accordion" ).accordion(); }); </script>
and this code only needs to be inside your page body
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div></div>