CODEWITHSUNDEEP
htmlcssbuttontexttextbox
FangXIII
FangXIII

Reputation: 81

How do I make a div container show some content, when clicked to show all content?

I was wondering how do I make it so that a div container show parts of its content in a small text box, and there will be an arrow at the bottom of the text box pointing downwards, and when clicked upon, it will make the text box bigger and show all of its content? Can this be achieved using html/css, without the need to use javascript and jQuery or is it a jQuery thing?

    <div class="society3" style="overflow:auto">
    <p>Description:<p>
    <p><?php echo $description; ?></p>
    </div>

The description variable just contains a paragraph of text, so I would like the div container to show part of the text and when someone wants to read the full description, they can click on the button and, box will extend to show all content of the div tag.

Upvotes: 0

Views: 1420

Answers (2)

Joel Garcia
Joel Garcia

Reputation: 11

The most similar of your objective is using html5, but this works in google chrome, sometimes in firefox.

<html>
	<head><meta charset="UTF-8"></head>
	<style type="text/css">
	 .expand{
	 	padding:10px;
	 }
	</style>
	<div class="expand">
	 <details>
	    <summary>OPEN</summary>
	    <p>Some text</p>
	 </details>
	</div>
</html>

Upvotes: 1

cchapman
cchapman

Reputation: 3367

The bad news is that you will need to use jQuery or similar for something like this, but the good news is that it's relatively straight forward. After you've loaded it into your page, all you need to do is target the id you would like to show/hide (or as it is called in jQuery toggle) and make an onClick() event.

For example, something like this should work.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#toggle").toggle();
    });
});
</script>

<div id="button" class="society3" style="overflow:auto">
    <p>Description:<p>
    <p id="toggle" style="display: none">[content]</p>
</div>

Upvotes: 1

Related Questions