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/


How To Get the Selected Checkboxes within a class in Jquery?

#option-1::

$('.tbl_prop_checkbox .prop_checkbox:checked').each(function(){
    var dis_service = $(this);
    console.log(dis_service);
});
#option-2::

$.each($(".tbl_prop_checkbox input.prop_checkbox:checked"), function(){            
    var dis_service = $(this);
    console.log(dis_service);
});
#option-3:: To Get if Chcekbox is Checked

$('.tbl_prop_checkbox .prop_checkbox').each(function(){
    var dis_service = $(this);
      
    if(dis_service.is(':checked')){
        console.log('checked service');
    }else{
        console.log('Not checked service');
    }
});