Active image in Definition List

I have a jQuery Accordion Slider, from which an example you can see here:

Accordion Slider

The active <dt> and vissible <dd> are in color and there is an arrow as you can see. Right now I have the arrow integrated in the <dd> background, but I would like it to be part of the <dt> instead, because I would like the arrow to disappear as soon as the <dt> is not longer active (when it change back to the inactive state(grey)) but i’m not sure how to handle it since the <dt’s> have a width and are already using a background image. Is it some how possible to have an extra image for the active state?

Here is the css for the slider:


.easy-accordion{
	display:block;
	position:relative;
	overflow:hidden;
	padding:0;
	margin:0
}

.easy-accordion dt,.easy-accordion dd{
	margin:0;
	padding:0
}

.easy-accordion dt,.easy-accordion dd{
	position:absolute
}

.easy-accordion dt{
	margin-bottom:0;
	margin-left:0;
	z-index:5;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-moz-transform-origin: 20px 0px;
	-o-transform: rotate(-90deg);
	
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	cursor:pointer;}
	
.easy-accordion dd{
	z-index:1;
	opacity:0;
	overflow:hidden;
}

.easy-accordion dd.active{
	opacity:1;
}

.easy-accordion dd.active{
	z-index:3
}

.easy-accordion dd.no-more-active{
	z-index:2;
	opacity:1
}
		
.easy-accordion dd.active{
	z-index:3
}
		
.easy-accordion dd.plus{
	z-index:4
}

.easy-accordion .slide-number{
	position: absolute;
	bottom: 0;
	left: 10px;
	font-weight: normal;
	font-size: 1.1em;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

#accordion{
	width:1250px;
	height:300px;
	margin: 0 15px;
	background:#fff;
}
		
#accordion dl{
	width:1250px;
	height:300px
}
	
#accordion dt{
	height:34px;
	line-height: 32px;
	padding: 0 10px 0 0;
	text-align:right;
	font-size: .96em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color:#033456;
	background: #FFF;
}

#accordion dt.hover,
#accordion dt.active,
#accordion dt.focus {
	color: #FFF;
}

#accordion dt.tab-one {
	background: url(../images/accordion/tab-one.png) 0 0 no-repeat;	
}

#accordion dt.tab-one.hover,
#accordion dt.tab-one.active {
	background: url(../images/accordion/tab-one.png) 0 -33px no-repeat;
}

#accordion dt.tab-two {
	background: url(../images/accordion/tab-two.png) 0 0 no-repeat;	
}

#accordion dt.tab-two.hover,
#accordion dt.tab-two.active {
	background: url(../images/accordion/tab-two.png) 0 -33px no-repeat;
}

#accordion dt.tab-three {
	background: url(../images/accordion/tab-three.png) 0 0 no-repeat;
}

#accordion dt.tab-three.hover,
#accordion dt.tab-three.active {
	background: url(../images/accordion/tab-three.png) 0 -33px no-repeat;
}

#accordion dt.tab-four {
	background: url(../images/accordion/tab-four.png) 0 0 no-repeat;
}

#accordion dt.tab-four.hover,
#accordion dt.tab-four.active {
	background: url(../images/accordion/tab-four.png) 0 -33px no-repeat;
}

#accordion dd{
	padding:25px;
	margin: 0 2px 0 0;
	color:  #FFF;
}

#accordion dd.slide-one {
	background: url(../images/accordion/slide-one.png) bottom left;
}

#accordion dd.slide-two {
	background: url(../images/accordion/slide-two.png)bottom left;
}

#accordion dd.slide-three {
	background: url(../images/accordion/slide-three.png)bottom left;
}

#accordion dd.slide-four {
	background: url(../images/accordion/slide-four.png) bottom left;
}

Thank you in advance

Is it some how possible to have an extra image for the active state?

Not if it’s already got a background image, not without CSS3’s multiple background images.

Can you take the jQuery and add another element like a span or something? Or an img tag?

That’s what’s breaking my head :goof: In the original slidedeck they have this class:


.skin-slidedeck dl.slidedeck .activeCorner {
	margin-left: -6px;
	background-image: url('corner.png');
	width: 12px;
	height: 25px;
}

Of which I’m sure they indeed trigger in the jQuery, but the original slidedeck is encrypted (so I can’t see how they used that class) so and I’m using an alternative jQuery.

This is basically the only function I see where the active class of the <dt> is involved:


		if(jQuery(this).find('.active').size()) { 
			jQuery(this).find('.active').next('dd').addClass('active');
		} else {
			jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
		}
		
		jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
		jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});

From what I understand, you want to relative position the arrow to step out from dd and show over in dt, and also have a sprite for the arrows (grey/colour), with a class active for the dd ?

In fact, all you have to do is to add the grey arrow to the grey image :wink: Like editing the http://atsalakis.bgmultimediaserver.net/images/accordion/tab-three.png adding the grey arrow to the grey stuff :slight_smile:

That’s indeed basically what I would like, I think :blush:

Becasue the arrows are now part of the <DD> background they are visible until the next <DD> covers them while the corresponding <DT> is already back to the in-active state.

So I would like to have itat the same position (overlapping the <DD> but being part of the <DT>
`
Edit: The arrow should only be there on active not on hover. So no sprite!

Maybe I don’t understand or what you want, or I didn’t make my self clear enough about what I see as a solution.

Your code is not the easiest to work with, the background image has the arrow in it:

My solution is about adding an element to the grey part in the images for slides: a grey arrow.

Like this maybe:

It’s a graphical solution not a mark-up or CSS solution. Those are implying radical changes to your code, which it appears to me you’re reluctant about.

Another graphical solution would be to erase the arrow from the big background in dd and put arrows in the background for dt. Something like this:

I know it’s not the most elegant solution the way I have it now but I didn’t see any other solution at the time, that why the question.

I actually would like the layout to be the same as it is now, but the arrow being part of the <DT> or any other way for that matter. As long as it overlaps the <DD> and is connected to the <DT>

Like this:

Instead of this:

Where as you can see the left arrow is still blue while the corresponding <DT> is back to the in-active state and the right arrow (orange) is not connected to the <DT> because of the movement.

I may be misunderstanding but couldn’t you just add an inner element to the dt and apply the image to that instead.

Or for modern browsers:



dt{position;relative}
dt:after {
    content:" ";
    position:absolute;
    width:30px;
    height:30px;
    background: red url(../images/accordion/arrow-one.png) no-repeat 0 50%;
    right:137px;
    top:34px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}


Of course you’ll need to add classes for the different arrows.

I may have got the wrong end of the stick though :slight_smile:

I actually think that you understand me right :wink: The only thing I’m struggling with is that the arrow need only be applied to the <DT> active:


#accordion dt{
	height:34px;
	line-height: 32px;
	padding: 0 10px 0 0;
	text-align:right;
	font-size: .96em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color:#033456;
	background: #FFF;
}

#accordion dt.tab-one { /*Just to indicate how I have set the normal class for the <DT's> */
	background: url(../images/accordion/tab-one.png) 0 0 no-repeat;	
}

#accordion dt.tab-one.active {{ /*Just to indicate how I have set the active class for the <DT's> */
	background: url(../images/accordion/tab-one.png) 0 -33px no-repeat;
}

How would apply that to the inner elements?

Thank you in advance

Edit: I found it. I applied the inner element on .active instead:


#accordion dt.tab-four.active:after{
	content:" ";
  position:absolute;
  width:14px;
  height:28px;
  background: url(../images/accordion/arrow-four.png) no-repeat 0 50%;
  right:137px;
  top:26px;
	z-index: 10;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}

Thank you so much Paul O’B :tup:

Hi,

If you nested a span inside the dt then you’d just do it like normal.



dt{position:relative}
[B]dt.tab-three.active span [/B]{
    position:absolute;
    width:30px;
    height:30px;
    background: red url(../images/accordion/arrow-one.png) no-repeat 0 50%;
    right:137px;
    top:34px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}

Or with :after:



dt{position:relative}
dt.tab-three.active:after {
    content:" ";
    position:absolute;
    width:30px;
    height:30px;
    background: red url(../images/accordion/arrow-one.png) no-repeat 0 50%;
    right:137px;
    top:34px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}

Just remember to hide it when its not active. However I’m not sure I see the need for when it’s active because it immediately gets hidden by the one on top anyway.

Thanks again Paul! both solutions are working. This is how it is complete now:


#accordion dt.active:after{
  content:" ";
  position:absolute;
  width:14px;
  height:28px;
  right:137px;
  top:26px;
  z-index: 10;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}

#accordion dt.tab-one.active:after {
  background: url(../images/accordion/arrow-one.png) no-repeat 0 50%;	
}

#accordion dt.tab-two.active:after {
  background: url(../images/accordion/arrow-two.png) no-repeat 0 50%;	
}

#accordion dt.tab-three.active:after {
  background: url(../images/accordion/arrow-three.png) no-repeat 0 50%;	
}

#accordion dt.tab-four.active:after {
  background: url(../images/accordion/arrow-four.png) no-repeat 0 50%;	
}

There is no need for hiding since the arrow is only applied to the active <dt> so as soon as a new <DT> and <DD> start to slide, the former in not longer active and the arrow is not longer there.

Great solution. I was really going to the entire jQuery to see where I could trigger a <span> or extra class, but so far without success. So you came as a live saver

Just remember that :after is not IE7 and under compatible so if you need to support them you will need that extra element inside.

Yeah your right! (As usual :slight_smile: ) Where would I place the span in that case. I tried it like this:


#accordion dt.active span{
  content:" ";
  position:absolute;
  width:14px;
  height:28px;
  right:137px;
  top:26px;
  z-index: 10;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}
#accordion dt.tab-one.active span {
  background: url(../images/accordion/arrow-one.png) no-repeat 0 50%;	
}

But I don’t have clue :eek: where to add the span within my html?

Here.

<dt> stuff <span></span></dt>

I followed Paul O’B’s advise to use <span> instead of :after because of IE 7 < but it is breaking even in IE 8 using <span>

Can anyone see what is wrong? Here are the link and the complete CSS:

Slider


.easy-accordion{
	display:block;
	position:relative;
	overflow:hidden;
}

.easy-accordion dt,.easy-accordion dd{
	position:absolute
}

.easy-accordion dt{
	z-index:5;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-moz-transform-origin: 20px 0px;
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	cursor:pointer;}
	
.easy-accordion dd{
	z-index:1;
	opacity:0;
	overflow:hidden;
}

.easy-accordion dd.active{
	opacity:1;
}

.easy-accordion dd.active{
	z-index:3
}

.easy-accordion dd.no-more-active{
	z-index:2;
	opacity:1
}
		
.easy-accordion dd.active{
	z-index:3
}
		
.easy-accordion dd.plus{
	z-index:4
}

.easy-accordion .slide-number{
	position: absolute;
	bottom: 0;
	left: 10px;
	font-weight: normal;
	font-size: 1.1em;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

#accordion{
	width:1250px;
	height:300px;
	margin: 0 15px;
	background:#fff;
	overflow: hidden;
}
		
#accordion dl{
	width:1250px;
	height:300px
}
	
#accordion dt{
	height:34px;
	line-height: 32px;
	padding: 0 10px 0 0;
	text-align:right;
	font-size: .96em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color:#033456;
	background: #FFF;
}

#accordion dt.hover,
#accordion dt.active,
#accordion dt.focus {
	color: #FFF;
}

#accordion dt.tab-one {
	background: url(../images/accordion/tab-one.png) 0 0 no-repeat;	
}

#accordion dt.tab-one.hover,
#accordion dt.tab-one.active {
	background: url(../images/accordion/tab-one.png) 0 -34px no-repeat;
}

#accordion dt.tab-two {
	background: url(../images/accordion/tab-two.png) 0 0 no-repeat;	
}

#accordion dt.tab-two.hover,
#accordion dt.tab-two.active {
	background: url(../images/accordion/tab-two.png) 0 -34px no-repeat;
}

#accordion dt.tab-three {
	background: url(../images/accordion/tab-three.png) 0 0 no-repeat;
}

#accordion dt.tab-three.hover,
#accordion dt.tab-three.active {
	background: url(../images/accordion/tab-three.png) 0 -34px no-repeat;
}

#accordion dt.tab-four {
	background: url(../images/accordion/tab-four.png) 0 0 no-repeat;
}

#accordion dt.tab-four.hover,
#accordion dt.tab-four.active {
	background: url(../images/accordion/tab-four.png) 0 -34px no-repeat;
}

#accordion dt.active span{
	content:" ";
  position:absolute;
  width:14px;
  height:28px;
  right:137px;
  top:26px;
	z-index: 10;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

#accordion dt.tab-one.active span {
  background: url(../images/accordion/arrow-one.png) no-repeat 0 50%;	
}

#accordion dt.tab-two.active span {
  background: url(../images/accordion/arrow-two.png) no-repeat 0 50%;	
}

#accordion dt.tab-three.active span {
  background: url(../images/accordion/arrow-three.png) no-repeat 0 50%;	
}

#accordion dt.tab-four.active span {
  background: url(../images/accordion/arrow-four.png) no-repeat 0 50%;	
}

#accordion dd{
	padding:25px;
	margin: 0 2px 0 0;
	color:  #FFF;
}

#accordion dd.slide-one {
	background: url(../images/accordion/slide-one.png) bottom left;
}

#accordion dd.slide-two {
	background: url(../images/accordion/slide-two.png)bottom left;
}

#accordion dd.slide-three {
	background: url(../images/accordion/slide-three.png)bottom left;
}

#accordion dd.slide-four {
	background: url(../images/accordion/slide-four.png) bottom left;
}

Thank you in advange!

It seems to be something to do with the IE rotation filter. Once you apply the z-index to the dt the element seems to get cut-off.

I spent a couple of hours trying to find a solution but nothing seems to work.

There probably is a solution in there somewhere but I just haven’t found the right combination. There are loads of bugs with using that filter and it does affect the way some things behave.

♪ Hmmm hm hm hmmmm hmmm
Hmmm hmmm hmmm ♪

♪… a graphical solution
Let me say… ♪

♪ Hmmm hm hm hmmmm hmmm
Hmmm hmmm hmmm ♪

Hi Paul! Thank you so much. I think my only option left is to opt for a CSS for IE without the arrows. I’m gonna post on the jQuery forum as well. If I find a solution I let everybody know. Again thanks a lot