My goal is that the size of the DIV (height) will adjust itself to the text on the DIV.
(while maintaining a minimum height) but if the user moves his mouse over the DIV
the DIV changes its height properly, without losing the beautiful effect of transition
If I change height: fit-content; to fix size, suppose to height: 100px;
the transition animation works but the div height don't necessarily match the text on the DIV.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 200px;
height: fit-content;
min-height: 50px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis</div>
</body>
</html>
I believe you can handle this situation by using min-height. see the below snippet:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 200px;
min-height: 50px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 200px;
min-height: 300px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt
justo rutrum tellus congue convallis Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue
convallis
</div>
</body>
</html>
In cases where the height of the element is not fixed and we want transitions, we should use either min-hegith or max-height.
You can animate the padding instead of height and you can keep the nice animation :)
div:hover {
background-color: #ffcccc;
padding-bottom: 100px;
}
Related
I need to hide a part of the text that is longer than 2 lines and add '...123 T.' as an indicator of the hidden overflow, like below:
What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview
Html:
<div class="outside-container">
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus
</span>
<span class="small-text">123 T.</span>
</span>
</div>
CSS:
.outside-container {
width: 200px;
}
.container{
max-width: 200px;
}
.main-text {
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.small-text {
color: #8e8f8f ;
font-size: 10px;
vertical-align: middle;
}
In the future you will be able to do this with only one line of code using:
line-clamp: 2 "...123 T.";
You can find more detail in the specification:
The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.
It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.
Until then, here is a very hacky idea to achieve the result:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "123 T.";
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: #8e8f8f;
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Or like below if you want the text to appear only with the dots:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "."; /* at least one character to set the height */
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: transparent; /* no colorataion*/
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Does the following code give the desired output?
.outside-container {
width: 220px;
}
.container {
width: 100%;
margin-bottom: 20px;
display: flex;
align-items: flex-end;
}
.main-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-right: 5px;
}
.small-text {
color: #8e8f8f;
font-size: 10px;
white-space: nowrap;
transform: translateY(-2px);
}
<div class="outside-container">
<div class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</div>
<div class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</div>
<div class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliqua
</span>
<span class="small-text">123 T.</span>
</div>
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
All About.... Z-Index?
(4 answers)
Closed 2 years ago.
I'm hitting a problem with a p5js integration in a webpage.
I'm trying to get two paragraph elements, positioned before and after an iframe, to overlap that iframe, whilst still allowing the iframe to be clickable, and still allowing the links in the paragraph elements to be clickable. I've fiddled around and read a lot about how z-index works and about pointer-events but I couldn't find a solution in these. Here is the minimal reproducible example :
The example works as intended with the bottom text, but the top text is being overlapped wrong.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
#roll {
width: 500px;
margin-right: auto;
margin-left: auto;
}
p {
position: relative;
font-size: 1.5em;
}
.codepoem {
width: 500px;
height: 200px;
}
.codepoem iframe {
position: relative;
width: calc(500px + 20vw);
margin-left: -10vw; /* center horizontal */
height: calc(200px + 40vh);
margin-top: -20vh;/* center vertical */
/*z-index:1;*/
}
</style>
</head>
<body>
<div id="roll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate et libero sit amet blandit. Integer mollis felis dui, vitae euismod nunc tincidunt sed. Aliquam eget libero sed ante interdum consectetur. Quisque a vulputate lorem. Morbi sit
amet
scelerisque turpis.</p>
<div class="codepoem">
<iframe src="https://editor.p5js.org/itsKaspar/embed/wUWKbsui6"></iframe>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
scelerisque turpis. Fusce vulputate et libero sit amet blandit. Integer mollis felis dui, vitae euismod nunc tincidunt sed. Aliquam eget libero sed ante interdum consectetur. Integer a placerat magna. </p>
</div>
</body>
</html>
note : I've purposefully created a container for the iframe to aid it in its underlapping behavior
which direction could I go in from now ? is there a simple solution I am not seeing ? Thanks a lot
You should try this...
#roll{
width:500px;
margin-right:auto;
margin-left:auto;
}
p{
position:relative;
font-size:1.5em;
z-index: 1;
}
.codepoem{
width:500px;
height:200px;
}
.codepoem iframe{
position:relative;
width:calc(500px + 20vw);
margin-left:-10vw; /* center horizontal */
height:calc(200px + 40vh);
margin-top:-20vh; /* center vertical */
/*z-index:1;*/
}
I have a website that includes a slider that transitions between paragraphs.
How can I adjust the height of my slider so it dynamically changes , depending on how much content is within the corresponding paragraph.
As of now, no matter how much content is within a paragraph, my slider still pushes everything down , regardless of height.
Thank you in advance for the help.
Codepen
<div class = "main_body">
<div class = "grid-x align-centered">
<div class = "cell large-12 main_content">
<div id="slider-wrapper">
<!-- slider controls -->
<div class="slider-controlls">
<button class="next">></button>
<button class="prev"><</button>
</div>
<!-- slider items -->
<div class="slider-items">
<div class = "slider-item">
<div class="content">
<div class = "title">
<h3>Our Mission</h3>
</div>
<p>
Our Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamlearn best in
while pLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam and
responsive. Children aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamolvers.
Children conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamay. <br /> We will work with the
child's natural inclination to explore and solve problems. We believe this
motivates learning for success in your child's school readiness and future.
</p>
</div>
</div>
<div class="slider-item ">
<div class="content">
<div class = "title">
<h3>Our Curriculum</h3>
</div>
<p>
Our center follows the Creative Curriculum. This curriculum is designed to
challenge our children, build their self confidence and, most importantly,
develop aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamum encourages
learning through arts, language, music, and socialization. <br /><br />We believe in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnean nulla quamild
development from early infancy through preschool years, focuses on
teacher-directed and child-initiated learning. <br /><br />The curriculum is goal-directed,
based on ongoing assessments for each child’s strengths and interests. With this
iLorem ipsLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quammotional
development is supporteLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamrmed of the
goals in the classroom and of how learning can be reinforced at home.
</p>
</div></div>
<div class="slider-item ">
<div class="content">
<div class = "title">
<h3>Our Philosophy</h3>
</div>
<p>We believe that each child is unique in
his/her own development and has the right to
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
a wholesome environment that will provide
early training in the life of a child and
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnd
the Staff dedicate their time and efforts
toward the following goals: </p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
nuLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quams. </li> <li>
ELorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamopmentally
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
experimentation.
</li> <li> Fostering positive attitudes
towards life and school which lay aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamfoundation for experience in future
years.
</li> <li> Encouraging the development
of a positive self-image.
</li> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
working parents. </li> <li> Encouraging
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
school, home, and in the community.
</li> <li> Promoting an educational
environment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam. </li>
<li> The parent, and staff will bond
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
education of their child. </li>
</ul>
</div>
</div>
<div class="slider-bullets">
<span class="bullet"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div> <!-- slider bullets -->
</div>
</div>
</div>
<div class = 'cell large-12'>
<img height = "300" width = "500" src = "http://s470961525.onlinehome.us/wp-content/uploads/2013/06/walking.png"/>
</div>
</div></div>
Css
.main_body{
background-image: url('https://www.thevinelearningcenter1.com/wp-content/uploads/2015/09/background.jpg');
//background-image: url('http://www.powerpointhintergrund.com/download/children-powerpoint-template-to-educate-your-children-mutimedia--5616');
background-size:cover;
background-repeat: no-repeat;
background-position: top;
width:100%;
max-width:100%;
}
#slider-wrapper {
width: 100%;
height:100vh;
position: relative;
}
.slider-controlls {
.next, .prev{
display: block;
position: absolute;
border: none;
background-color: hsla(200, 100%, 80%, 0.2);
border-radius:10px;
cursor:pointer;
color: black;
top:50%;
padding:15px;
transform: translateY(-50%);
font-size: 18px;
z-index: 99999;
}
.next{
right:70px;
}
.prev{
left:70px;
}
}
.slider-items {
height: 100vh;
position: relative;
overflow:hidden;
.slider-item{
width:100%;
position: absolute;
opacity: 1;
&.active{
opacity:1;
.content{
.title h3{
opacity:1;
z-index: 9999;
font-weight: normal;
font-family: 'Gaegu', cursive;
font-weight:700;
background-color: hsla(200, 100%, 80%, 0.5);;
padding: 25px 0;
letter-spacing: 15px;
color:green;
}
p{
letter-spacing: 3px;
line-height:2em;
text-align: left;
font-family: 'Gaegu', cursive;
opacity: 1;
left: 20%;
z-index: 9999;
font-weight:500;
padding-left:100px;
padding-right:100px;
width:80%;
}
ul{
font-family: 'Gaegu', cursive;
margin-top:-5%;
opacity:1;
letter-spacing: 2px;
text-align: left;
line-height:2em;
font-size: 18px;
z-index: 9999;
padding-left:100px;
padding-right:100px;
width:80%;
}
img{
opacity:1;
}
}
}
.content{
width:100%;
position: relative;
.title h3{
text-align: center;
opacity:0;
transition: all 0.5s;
}
p{
padding: 5% 0 50px 50px;
margin:0 auto;
opacity:0;
transition: all 0.6s;
transition-delay: 0.1s;
background-color: hsla(200, 100%, 90%, 0.8);
width:85%;
font-family: 'Gaegu', cursive;
}
ul{
font-family: 'Gaegu', cursive;
padding: 5% 0 50px 50px;;
margin:0 auto;
opacity:0;
transition:all .10s;
background-color: hsla(200, 100%, 90%, 0.8);
width:85%;
transition-delay:.6s;
margin-top:-3%;
}
}
}
}
.slider-bullets {
width:100px;
bottom:20px;
position:absolute;
margin-top:10px;
text-align: center;
z-index: 99999;
width:100%;
.bullet{
width: 20px;
height: 20px;
background: rgba(#e4e4e4, 1);
border: 2px solid transparent;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: all 0.3s;
&.active{
border: 2px solid #333;
}
}
}
#media screen and (max-width:1300px){
.slider-items{
.slider-item{
width:100%;
position: absolute;
opacity: 1;
&.active{
opacity:1;
.content{
.title h3{
opacity:1;
z-index: 9999;
font-weight: normal;
font-family: 'Gaegu', cursive;
font-weight:700;
background-color: hsla(200, 100%, 80%, 0.5);;
padding: 25px 0;
letter-spacing: 15px;
color:green;
}
p{
font-size:18px;
letter-spacing: 2px;
line-height:1.7em;
text-align: left;
font-family: 'Gaegu', cursive;
opacity: 1;
left: 20%;
z-index: 9999;
padding-left:50px;
padding-right:50px;
width:80%;
}
ul{
font-size:14px;
line-height:2em;
padding-left:50px;
padding-right:50px;
}
}
}
}
}
}
I feel stupid. All I had to do was change display:none when not active and change it to display:block when active ..one of those days.
For a project I would like some paragraphs to transition from one text content to another. The method I would like to use is to have two paragraphs in my HTML, but only one is visible at a time.
I have the transition working fine, but I can't find a way to overlap the two paragraphs in a responsive way. Anybody know how to make this work?
Here's what I have so far (all I'm missing is the responsive paragraph overlap):
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
}
.text1,
.text2 {
transition: opacity 1s ease;
opacity: 0;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
opacity: 1;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>
If this is just a bad way to do it then please let me know.
The reason I want this to be responsive and not rely on absolute positioning or margins of -104px is because I would like to use this method on other things than paragraphs (buttons, navbars, etc.) as well, not just because I want it to look good on a smaller screen (even though I do want it to look good on a smaller screen!) :)
This is the best I can do that would fit your description. We're lacking too many constrains here to display the overlay paragraph correctly in all cases...
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
position: relative;
}
.text1,
.text2 {
transition: opacity 1s ease;
opacity: 0;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
opacity: 1;
}
.show1 > .text2,
.show2 > .text1{
position: absolute;
top: 0;
left: 0;
right: 0;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>
Even though paragraphs hide with opacity: 0 their size is still calculated by your browser. You need to make them both overlap each other.
To do so you need to combine display: none/block with the opacity.
Here is an example:
http://jsfiddle.net/xctLmLae/1/
How about switching display instead of opacity:
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
}
.text1,
.text2 {
transition: display 1s ease;
display: none;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
display: block;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>
I notice when I change the padding settings on the content class (I think there is too much white space), it completely messes up the smooth dropdown. I'm not sure why this is the case, I can not see anything in the JavaScript.
Fiddle
HTML:
<div class="container">
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>
CSS:
.title {
padding-left:15px;
height:17px;
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px
no-repeat;
cursor:pointer;
margin-bottom:10px;
}
.title img{
width: 24px;
margin-right: 5px;
float: left;
}
.title span{
font-size: 16px;
line-height: 24px;
float: left;
}
.on {
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px no-repeat;
}
.content {
display:none;
padding: 10px;
margin-bottom:10px;
}
JavaScript:
$(document).ready(function() {
$('.title').click(function() {
$('.title').removeClass('on');
$('.content').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
});
What's happening is as the container's height is animated, the children of that container are being affected by margins, line-heights, etc, which are all dependent on the boundaries of the container. Add the following to fix:
.content {
overflow: hidden;
}
Yeah, it's that simple :P
Here's your Fiddle updated.