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>
Related
I have the following code:
body{
width:100%;
font-family:sans-serif;
background: transparent;
}
.testimonials{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
grid-gap:20px;
}
.testimonials .card{
position:relative;
width:350px;
margin:0 auto;
background:#333;
padding:20px;
box-sizing: border-box;
text-align:center;
box-shadow: 10px 8px 20px rgba(0,0,0,.5);
overflow: hidden;
}
.testimonials .card .layer{
position: absolute;
top: calc(100% - 3px);
width:100%;
height:100%;
left:0;
background:linear-gradient(#034e70, #390375);
z-index:1;
transition:0.5s;
}
.testimonials .card:hover .layer{
top:0;
}
.testimonials .card .content{
position:relative;
z-index:2;
}
.testimonials .card .content p{
font-size:18px;
line-height:24px;
color:#FFF;
}
#media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}
.testimonials .card .content .image{
width:100px;
height:100px;
margin: 0 auto;
border-radius:50%;
overflow:hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
font-size:15px;
color:#fff;
}
.testimonials .card .content .details h2 span{
color:#03a9f4;
font-size:12px;
transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
color:#fff;
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
I have the above code embedded in a website and so when I view the website on a smaller screen, I am getting this output:
The white text, image, and blue text are not responsive. However, the card is. Its just these three things, and I tried adding media queries to make them responsive but it did not work for some reason, and the output was the exact same as above.
Expected Output
When I inspect it and view it on 414 width, I am getting the above expected output which is what I want. However, below 414 width, I am getting the output as shown in the very first picture. How would I fix this? Any suggestions?
Try updating the grid-template-columns on media query for responsive design/mobile screen.
body {
width: 100%;
font-family: sans-serif;
background: transparent;
margin: 0;
}
.testimonials {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.testimonials .card {
position: relative;
max-width: 350px;
margin: 0 auto;
background: #333;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
overflow: hidden;
}
.testimonials .card .layer {
position: absolute;
top: calc(100% - 3px);
width: 100%;
height: 100%;
left: 0;
background: linear-gradient(#034e70, #390375);
z-index: 1;
transition: 0.5s;
}
.testimonials .card:hover .layer {
top: 0;
}
.testimonials .card .content {
position: relative;
z-index: 2;
}
.testimonials .card .content p {
font-size: 18px;
line-height: 24px;
color: #FFF;
}
.testimonials .card .content .image {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.testimonials .card .content .details h2 {
font-size: 15px;
color: #fff;
}
.testimonials .card .content .details h2 span {
color: #03a9f4;
font-size: 12px;
transition: 0.5s;
}
.testimonials .card:hover .content .details h2 span {
color: #fff;
}
#media all and (max-width: 500px) {
.testimonials {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.testimonials .card .content p {
width: 100%;
}
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
It's because you've set a fixed width of 350px for your element. When you make the window any smaller than ~370px wide, the fixed width prevents the element from getting any smaller. Try using relative sizes like % instead.
so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
how can I do that with pure JS or CSS?
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}
html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>
On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}
html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>
Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with javascript, etc. which I expect you need. Here's what i want to do:
I have a basic 'parallax' website (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript i should be using.
* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page" id="page-one">
<h1 class="main-title">Title</h1>
</div>
<div class="page" id="page-two">
<h2 class="page-title">Page two title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
</div>
<div class="page" id="page-three">
<h2 class="page-title">Page three title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.google.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page" id="page-four">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.bing.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page page-five" id="page-five">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">Lorem ipsum dolor</h4>
<div class="page-para">
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
<h6 class="page-five-bold">Lorem ipsum dolor</h6>
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="foot left-footer">
<h5>Lorem Ipsum</h5>
<p class="foot-content email">someone#example.com</p>
</div>
<div class="foot center-footer">
<h5>Footer</h5>
<ul class="foot-content">
<li class="foot-list">Google
</li>
<li class="foot-list">Bing
</li>
<li class="foot-list">Yahoo
</li>
</ul>
</div>
<div class="foot right-footer">
<div class="right-foot-spacer"></div>
<div class="foot-content quote">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p>-Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>
If I've understood your question correctly, one way to achieve the effect you are looking for is by monitoring the getBoundingClientRect().top property of the final <div> and the getBoundingClientRect().bottom property of the penultimate <div>.
When the getBoundingClientRect().top property of the final <div> hits the top of the viewport, you can change the element's style rules to fix it in that position;
When the getBoundingClientRect().bottom property of the penultimate <div> comes back into view at the top of the viewport, you can unfix the final <div> so that it starts scrolling as normal again.
Example:
function fixPage5() {
var footer = document.getElementsByTagName('footer')[0];
var pages = document.getElementsByClassName('page');
if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) {
pages[(pages.length - 1)].classList.add('fixed');
footer.style.marginTop = '424px';
}
if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) {
footer.style.marginTop = '0';
pages[(pages.length - 1)].classList.remove('fixed');
}
}
window.addEventListener('scroll',fixPage5,false);
body {
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100%;
height: 400px;
padding: 12px;
font-size: 72px;
}
footer {
position: relative;
width: 100%;
z-index: 12;
height: 400px;
font-size: 72px;
color: rgb(255,255,255);
background-color: rgb(31,31,31);
}
.page:nth-of-type(odd) {
color: rgb(255,255,255);
background-color: rgb(127,127,127);
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: -12;
}
<div class="page">Page One</div>
<div class="page">Page Two</div>
<div class="page">Page Three</div>
<div class="page">Page Four</div>
<div class="page">Page Five</div>
<footer>Footer</footer>
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.