0

Show More – Show Less using switchClass

Demo http://jsfiddle.net/m/jpc/
Live Codehttp://jsfiddle.net/sandypal/225c6hry/1/
[code language=”html”]
<div class="text-container">
<h1>Lorem ipsum dolor</h1>
<div class="text-content short-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>
<div class="text-container">
<h1>Lorem ipsum dolor</h1>
<div class="text-content short-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>
[/code]
[code langauage=”css”]
div.text-container div.show-more p{
width: 100px;
height: 35px;
margin-left: auto;
margin-right: auto;
}

div.short-text~div.show-more p{
background: url(http://placehold.it/100×35&text=More);
}

div.full-text~div.show-more p{
background: url(http://placehold.it/100×35&text=Less);
}

div.text-container {
margin: 0 auto;
width: 75%;
}

.text-content{
line-height: 1em;
}

.short-text {
overflow: hidden;
height: 2em;
}

.full-text{
height: auto;
}

h1 {
font-size: 24px;
}

.show-more {
padding: 10px 0;
text-align: center;
}

[/code]
[code language=”js”]
$(".show-more p").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev();

switchClasses($content);

return false;
});

function switchClasses($content){
if($content.hasClass("short-text")){
$content.switchClass("short-text", "full-text", 400);
} else {
$content.switchClass("full-text", "short-text", 400);
}
}
[/code]

Sandeep Kumar

Sandeep kumar is a web developer and a professinal blogger. He works for latest technologies and write articles what he learn. In ICodeHub he share web languages tutorials and other programming tips and tricks. if you need some help or have some suggestion then mail him at sandeep92pal@gmail.com without any hesitation. He believes in learning and sharing.