How to Call a function on close bootstrap modal using Jquery?

Want to run a function , On Close Bootstrap Modal.

# On Show or Open a Bootstrap Modal, Call a function

$('#modal').on('shown.bs.modal', function (e) {
    // Execute Your Codes 
}) 

# On Close or Hide a Bootstrap Modal, Call a function

$('#modal').on('hidden.bs.modal', function (e) {
    // Execute Your Codes 
})

For any suggestion or feedback, queries please comment to improve.

How to Check checkbox is checked or not?

By using the function we can know if the checkbox is selected or checked or not. then depending on the result we can perform operations.

<script>
function is_checkbox_selected(element){

    if(element.checked) {
        // CheckBox is checked
    }else {
        // Checkbox is not checked
    }
}

</script>

The Html code: Call the above function from on check or on click from javascript or Jquery.

<input type="checkbox" name="accept" value="1" onclick="is_checkbox_selected(this)" >

How to hide the div one by one using jquery?

<!DOCTYPE html>
<html>
<head>
<title>Demo - Devchandan</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
	<div class="row main_block">
		<div class="col-sm-4 sub_block sub_block_1">
			<h3>Column 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
		<div class="col-sm-4 sub_block sub_block_2">
			<h3>Column 2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
		<div class="col-sm-4 sub_block sub_block_3">
			<h3>Column 3</h3>        
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<button class="btn btn-primary clickme">Click Me!</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		var sub_blocks = [];
		$("div.main_block").find('div.sub_block').each(function(key,val){
			let subdiv_cls = 'sub_block_'+(key+1);
			sub_blocks.push(subdiv_cls);
		});	
		var blocks_display 	= sub_blocks;
		var blocks_hide 	= [];
		$('button.clickme').on('click', function(){
			var cls = blocks_display.shift();
			$.each(blocks_display, function(key,divclass){
				$('.'+ divclass).show();
			})
			$('.'+ cls).hide();
			blocks_display.push(cls);
		});
	});
</script>
</body>
</html>

How to show and hide div one by one using jquery?

Here, Suppose, have 3 Div, like Div-1,Div-2,Div-3. Now when I clicked the button , then Div-1 will hide. then Div-2, then Div-3. Finally All Div is hidden. Then when clicked again Div-1 will show, then Div-2 will show, Then Div-3 will show. This type it will function every time on clicking the button.

Here, Full page code is Given below,

<!DOCTYPE html>
<html>
<head>
<title>Demo - Show and Hide Div</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
	<div class="row main_block">
		<div class="col-sm-4 sub_block sub_block_1">
			<h3>Column 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
		<div class="col-sm-4 sub_block sub_block_2">
			<h3>Column 2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
		<div class="col-sm-4 sub_block sub_block_3">
			<h3>Column 3</h3>        
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<button class="btn btn-primary clickme">Click Me!</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		var sub_blocks = [];
		$("div.main_block").find('div.sub_block').each(function(key,val){
			let subdiv_cls = 'sub_block_'+(key+1);
			sub_blocks.push(subdiv_cls);
		});	
		var blocks_display 	= sub_blocks;
		var blocks_hide 	= [];
		var pointdisplay = true; 
		$('button.clickme').on('click', function(){
			if(pointdisplay){
				var cls = blocks_display.shift();
				blocks_hide.push(cls);
				if(blocks_display.length == 0){ pointdisplay = false; }
			}else{
				var cls = blocks_hide.shift();
				blocks_display.push(cls);
				if(blocks_hide.length == 0){  pointdisplay = true; }
			}

			$('div.sub_block').show();
			$.each(blocks_hide, function(key,divclass){
				$('.'+ divclass).hide();
			})
		});
			
	});
</script>
</body>
</html>

Check Demo : https://jsfiddle.net/devchandansh/c3qu924h/

How do I keep two div the same height for any device?

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body { padding: 0; margin: 30px 0 30px 0; background: yellow; }
.textbox-text {  background: #fff; color: #000; padding: 15px; margin-bottom: 30px; }
.textbox {  border: 1px solid #000; margin-bottom: 30px; }

#test .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;  display: flex;}
#test .row > [class*='col-'] {display: flex;flex-direction: column; background: #fff;margin: 0 15px;}
#test .column{ padding: 15px;}
</style>

</head>
<body>
     
     <div id="projects">
        <div class="container">
            <div class="row">
                
                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap from MaxCDN when.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="textbox">
                        <div class="textbox-image">
                            <img src="http://placehold.it/350x150" class="img-responsive">
                        </div>
                        <div class="textbox-text">
                            <p>
                                    Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site. Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site.<br><br>
                                    t will be loaded from cache when they visit your site.
                            </p>
                        </div>
                        <div class="textbox-button text-center">
                            <button type="button" class="btn btn-primary">Read more</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container" id="test">
        <div class="row">
            <div class="col-sm-4 ">
                <div class="textbox-image ">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>
            <div class="col-sm-4 ">
                <div class="textbox-image">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>
            </div>
            <div class="col-sm-4 ">
                <div class="textbox-image">
                    <img src="http://placehold.it/350x150" class="img-responsive">
                </div>
                <div class="column">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>

        </div>
    </div>
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.textbox .textbox-text');
});


$(window).resize(function(){
  equalheight('.textbox .textbox-text');
});
</script>

</body>
</html>

Check in JsFiddle:

http://jsfiddle.net/nV3Ua/1821/