: Show hidden text in HTML page What code I have to add to my HTML page if I want to see hidden text related to short paragraph? Here is an example: a) is what you see when you open web

@Hamaas447

While @Analog 's answer is correct, it would be worth investigating JQuery which has vast libraries that will do this for you and also add some further functionality.

Vote Up Vote Down

@Cody1181609

You would have to use javascript with your HTML.

There is a very well done answer over at StackOverflow (Here) which should get you on the right track and help you to get the outcome you desire.

Here is the example that was shown.

HTML:

<div class="text-container">
<h1>Title goes here</h1>
<h2>Subtitle</h2>
<div class="content hideContent">
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.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
<a href="#">Show more</a>
</div>
</div>​


CSS:

.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}

.showContent {
line-height: 1em;
height: auto;
}



I'm assuming setting the line-height will ensure it is the same in all
browsers. I'm not 100% certain on that though.

I attached a click event to the "show more" link which switches the
classes on the div using jQueryUI switchClass():


$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();

if(linkText === "SHOW MORE"){
linkText = "Show less";
$content.switchClass("hideContent", "showContent", 400);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 400);
};

$this.text(linkText);
});​


DEMO - show more / show less and applying line-height and animation


The above code is an example only but should get you started into the
right direction.

Vote Up Vote Down