CODEWITHSUNDEEP
jqueryhtmlcss
BR89
BR89

Reputation: 716

Style Span and Jquery

Hopefully a simple question that I'm having that blank moment over. I'm trying to style a Span tag in my HTML (which ties to a block of jquery).

My SHOW span is holding the background I set but not the width. While the HIDE centers, and has the appropriate width. Not sure as to why. What am I missing that is preventing the first Span with "SHOW" to style completely? Fiddle below.

.slider{
display:none;
}
.collapseSlider{
display:none;
}
.sliderExpanded .collapseSlider{
display:block;
width: 100%;
text-align: center;
}
.sliderExpanded .expandSlider{
  display:none;
}
.dark {background:#0082d1; text-align: center; width: 100%;}
.light {background:#003a6f; text-align: center; width: 100%;}  

<p class="toggler" id="toggler-slideOne">
<span class="expandSlider dark">SHOW</span><span class="collapseSlider dark">HIDE</span>
 </p>
  <div class="slider" id="slideOne">
 <p>Slide One lorem ipsum opsum...</p>
 <span class="closeSlider">Close</span>
 </div>

http://jsfiddle.net/f8xxk/

As always thanks for your time and continued support!

Upvotes: 0

Views: 61

Answers (2)

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

Since span is an inline element (they ignore the width property) you would need to set a floating to that span or set the display to inline-block in order to let this span have a width

.dark {background:#0082d1; text-align: center; width: 100%;}
span {display:inline-block  }
/*Any of this will make the span to have a block and don't ignore the width property*/
span {display:block}

Fiddle

Upvotes: 1

guioconnor
guioconnor

Reputation: 414

You can't set the width on an inline element, setting it's display property to block would be one way of fixing it.

Modified fiddle: http://jsfiddle.net/f8xxk/3/

span {
    display: block;
}

Upvotes: 1

Related Questions