WebSite X5Help Center

 
Paul W.
Paul W.
User

Changing style (colour) of html accordion  en

Author: Paul W.
Visited 3472, Followers 2, Shared 0  

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">  

Posted on the
3 ANSWERS
Anthony A.
Anthony A.
User

it is inside /resources/demos/style.css

you need to change the color inside that style.css file

did you import that css?

Read more
Posted on the from Anthony A.
Anthony A.
Anthony A.
User

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>

Read more
Posted on the from Anthony A.