Weterlesen Funktion
HTML
<div class="entry">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<a class="read-more">Read more</a>
<p class="more">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</p>
</div>
<div class="entry">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
lacinia odio sem nec elit.
<a class="read-more">Read more</a>
<p class="more">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada
magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl
consectetur.
</p>
</div>
CSS
body {
margin: 10px;
font-weight: 16px;
}
.entry {
margin-top: 10px;
}
p.more {
display:none;
}
.read-more
{
cursor: pointer;
display: inline-block;
}
a.read-more{
border-bottom: 1px solid black;
}
a.read-more:hover {
border-bottom: 1px solid orange;
}
JavaScript
var moreText = "Read more",
lessText = "Read less",
readMore= $("a.read-more");
readMore.click(function() {
$(this).text($(this).text() == moreText ? lessText : moreText).next("p.more").slideToggle("fast");
});