.gif)
html
<div id="accordion" >
<h3>Education level</h3>
<div>
<SpotfireControl id="3606defe5..." />
</div>
<h3>Smoker</h3>
<div>
<SpotfireControl id="d49b2b14729a4..." />
</div>
<h3>Smoke Status</h3>
<div>
This is an example of an Action Control changing a Property Control. It also contains some filters<hr/>
<SpotfireControl id="d9f614bf651c4fd..." />
<SpotfireControl id="a397f90f2d9643f5..." />
<hr/>Checkbox Filter: </br><SpotfireControl id="45e93582260644cc..." />
<hr/>Range filter: </br><SpotfireControl id="b74b3048794d40e3..." />
</div>
</div>
jscript
//more accordion configuration options here
$( "#accordion" ).accordion({
heightStyle: 'content'}
);
If you Spotfire admin turned off html sanitation, you can change the default colors and fonts, override the css (put this on top of your html code only if html sanitation is off under Admin Mgr>Preferences>Text Area)
<style>
.ui-accordion-header{font-size:14px;font-weight:bold;color:yellow}
.ui-accordion-content{font-size:10px;background:yellow;}
</style>
Otherwise, inject the style tag by adding this line to your jscript:
$("body").append("<style>\
.ui-accordion-header{font-size:14px;font-weight:bold;color:yellow}\
.ui-accordion-content{font-size:10px;background:yellow;}\
</style>")
<style>
.ui-accordion-header{font-size:14px;font-weight:bold;color:yellow}
.ui-accordion-content{font-size:10px;background:yellow;}
</style>
Otherwise, inject the style tag by adding this line to your jscript:
$("body").append("<style>\
.ui-accordion-header{font-size:14px;font-weight:bold;color:yellow}\
.ui-accordion-content{font-size:10px;background:yellow;}\
</style>")
10 comments:
Is it possible to change the color and font styles in accordion?
Hello Vara,
According to the jquery documentation*, the accordion widget uses the jQuery UI CSS framework to style its look and feel. If accordion specific styling is needed, the following CSS class names can be used:
ui-accordion: The outer container of the accordion.
ui-accordion-header: The headers of the accordion. The headers will additionally have a ui-accordion-icons class if they contain icons.
ui-accordion-content: The content panels of the accordion.
for example, just add this style at the beginning of your html code:
≪style≫
.ui-accordion-header{font-size:14px;color:yellow}
.ui-accordion-content{font-size:10px;background-color:yellow;}
≪ /style≫
* https://api.jqueryui.com/accordion/
Jose in 7.0 the style tag is not recognized.
To change the color you can add another JavaScript code to execute after the original accordion code.
$( "#accordion .ui-accordion-header" ).css(
"background","#CC0000"
)
Jeff,
Forgot to mention that in order to use non-standard tags, you will need to ask your admin to disable the html sanitation under Admin Manager>Preferences>TextArea
A work around is to inject the style tag via javascript, so just add the following line of code to your js:
$("body").append("≪style≫\
.ui-accordion-header{font-size:14px;font-weight:bold;color:yellow}\
.ui-accordion-content{font-size:10px;background:yellow;}\
≪/style≫")
Hello Jose!
Is it possible add scrollbar to Accordion Menu?
Tks a lot for you post.
Hello Diego,
You can add a scrollbar to any div inside the content of each pannel by adding the height and overflow style attributes like this:
≤h3≥Education level≤/h3≥
≤div style='height:30px;overflow:auto'≥
≤li≥ 1≤/li≥
≤li≥line 2≤/li≥
≤li≥line 3≤/li≥
≤li≥line 4≤/li≥
≤li≥line 5≤/li≥
≤li≥line 6≤/li≥
≤li≥line 7≤/li≥
≤li≥line 8≤/li≥
≤li≥line 9≤/li≥
≤/div≥
Hi! For some reason my accordion colors are showing up on spotfire but not coming up when looking at the same page on the webplayer. Any ideas?
Hi,
This works great if only one text area on a page, but trying to add another text area with accordion breaks it, same for the gauge js. Is there a way to have 2 of these on 1 page? For example an accordion text area on the left with page settings, and an accordion text area on the right with visualization settings.
Thanks so much for the help and great posts
Hello Michael, try to use different id's even if they are in separate text areas. There is a post that shows multiple gauges.
Post a Comment