Show Hide text in HTML PHP using Bootstrap collapse class on button click

How to visible the whole div inside text on button click by Bootstrap’s CSS Collapsible example tutorial.

In this tutorial we are simply using Bootstrap’s collapse class to make the whole selected div( Using DIV ID tag ) invisible and visible using sliding up and sliding down effect. This will help us to create text news with hiding feature so by default the text is hide and after clicking on button it will smoothly scroll down the text and visible it. So here is the complete step by step tutorial for Show Hide text in HTML PHP using Bootstrap collapse class on button click.

How to Show Hide text in HTML PHP using Bootstrap collapse class on button click.

https://www.android-examples.com/demo/heading-tag.html
Code for collapse-class.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Collapsible Example</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">
 <h2>Basic Collapsible Example</h2>
 <button type="button" class="btn btn-danger" data-target="#Tdiv" data-toggle="collapse">Basic Collapsible Demo</button>
 
 <div id="Tdiv" class="collapse">
 Android Examples Tutorials. </br>
 Bootstrap Examples Tutorial. </br>
 PHP Examples Tutorial.</br>
 
 </div>
 
</div>

</body>
</html>

Screenshots:

basic-collapse-1

Show Hide text in HTML PHP using Bootstrap collapse class on button click

 

2 Comments

  1. Hi Juned, your ” subscribe via email” form it’s not working, so I couldn’t subscribed. Please check it.

Leave a Reply

Your email address will not be published. Required fields are marked *