How to call Div on Button Click in jQuery

In this article, you going to seed how to call div on button click in jQuery and using simple example in step by step.

If you are looking for this topic then you are at right place.

You come to understand easily when we go through below example.

Let’s start with the topic of div call on button click in jQuery.

The important point regarding jQuery, Is that to check first jQuery script is declare head tag or any where above the code before staring using jQuery.

After declaration you can start with using jQuery.

For calling div on button click, two points you should we have to do are as follow.

First point is to declare a div with id with value.

This value is going to be shown when we call this div using jQuery.

This div is called using jQuery with the help of id.

Second point is to declare button.

This button is clicked using its id using jQuery.

After declaration of button is complete.

Declare one more div with id in which you have to add value of called div value on button click.

We have to hide div because we have to display this div only when first div with id “divValue” is called on click using jQuery.

To hide div we going use hide function of jQuery.

After called div value on click we have to display its value into another div we have to show function.

Add value in JSON array in jquery

From the below example you come to understand easily and in a simple way.

<html lang="en">
<head>
 <title>How to call Div on button click in jquery</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div style="background-color:#e5bcbc;padding:10px;" align="center">
	<b>The value for div is :</b><br/>
	<div id="divValue">123456</div><br/> 
    <button name="btn" id="btnclick">Get Div value</button><br/><br/>
	<b>Output:</b><div id="displaydiv"></div>
</div>
<script type="text/javascript">
	$('#displaydiv').hide();
    $(document).ready(function() {
    $('#btnclick').click(function() {
		var divalue = $('#divValue').text();
		$('#displaydiv').text(divalue);
		$('#displaydiv').show();
        //$('#child').toggle();
    });
});
</script>
</body>
</html> 

In Below image you going output of above executed code.

How-to-call-Div-on-button-click-in-jquery-Output-Value
How-to-call-Div-on-button-click-in-jquery-Output-Value

Conclusion :

Finally, we done with the point how to call div on button click in jQuery.

I hope you like this article and if you feel like we missed out on anything, please comment below.

Leave a Reply