Toggle Background Color for JQuery Accordion
I am having a little trouble implementing the same CSS Style that is used in one JavaScript Toggle Control to use in a different JQuery Accordion Control
The Toggle Control- This is the Style that I need: http://jsfiddle.net/NinjaSk8ter/yXNmx/
The Accordion Control- This is the Accordion Control for which I need to apply the styling.
Specifically: when you click on a Toggle Link you see that the grey header appears. For the Accordion Control that grey header always appears. This should appear only when clicked as is the case with the Toggle Control.
The other Style that I need to replicate is the amount of spacing between each of the Questions. Would Padding suffice for the class that wraps the Anchor Tag? Whenever I add a Top-Margin for this class, there is Jitter in the Accordion.
For the Accordion I have added the class="factterm" for the DT element which wraps the Anchor Tag.
I added this to the Accordion.
<body>
<div id="galColumn">
<div class="contentbox">
<dl>
<dt class="factterm">
<a id="A1" href="javascript://" class="questionLink">Question1</a>
</dt>
<dd id="1" class="answer">
<div class="indent-box">
Answer1
</div>
</dd>
<dt class="factterm">
<a id="A2" href="javascript://" class="questionLink">
Question2</a>
</dt>
<dd id="2" class="answer">
<div class="indent-box">
Answer2
</div>
</dd>
</d1>
</div>
</div>
</body>
.indent-box
{
padding: 5px;
}
.factterm
{
/*margin-top: 2px;*/
padding: 2px 5px 0;
/*width: 525px;*/
}
#accordion .handle
{
width: 260px;
height: 30px;
background-color: orange;
}
#accordion .section
{
width: 260px;
height: 445px;
background-color: #a9a9a9;
overflow: hidden;
position: relative;
}
Someone had previously mentioned that I need to add JavaScript to remove the bg class that has a background property which is setting the background color.
<html>
<head>
<title></title>
<style type="text/css" media="screen">
dt{ background-color: #ccc; }
dd { height: 100px; }
</style>
&l开发者_运维知识库t;/head>
<body></body>
</html>
- Within the style block remove the dt background style:
dt{ background-color: #ccc; } - Add this class
.active {background:#a9a9a9} - In order to toggle the active class, add this line to your click function
$(this).addClass('active').siblings().removeClass('active');
You can view a working example here: http://jsfiddle.net/pratie/xGwpk/
加载中,请稍侯......
精彩评论