How to make a button invisible after clicking on it,at that time how to make a div visible?

Question

I want to make a div visible on button click,and i also need the clicked button is invisible when the div is appeared

You have to regard what you have tried. In this way, the question may be closed. — SaidbakR, Dec 14 '17 at 05:42

score 1 · Answer 1 · answered Dec 14 '17 at 05:46

1

To start with you can hide the div initially and then hide show the button and div on button click like this

$(document).ready(function() {
  $("#hide").click(function() {
    $(this).hide();
    $("#div").show();
  });

});

#div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>If you click on the "Hide" button, button will disappear And A div will appear.</p>

<div id="div"> I am a div </div>
<button id="hide">Hide</button>

Read here about jQuery hide() and show()

answered Dec 14 '17 at 05:46

Sanchit Patiyal

4,910
1
14
31

Thanks For helping me – vishnu reji Dec 14 '17 at 05:54
Glad I helped. DO accept the answer for future reference to others :) – Sanchit Patiyal Dec 14 '17 at 05:55
i need to hide entire div including the button and make new div visible on same position of the old div – vishnu reji Dec 14 '17 at 06:00

score 1 · Accepted Answer · edited Dec 14 '17 at 07:29

1

You can use this code,

$('#your_button_id').on('click',function(){
  $('#your_div_id').show();
  $(this).hide();
});

edited Dec 14 '17 at 07:29

Martin Schneider

3,268
4
19
29

answered Dec 14 '17 at 05:48

Abhilash Ravindran C K

1,818
2
13
22

Thanks For helping me – vishnu reji Dec 14 '17 at 05:54
i need to hide entire div including the button and make new div visible on same position of the old div – vishnu reji Dec 14 '17 at 06:00
Then instead of $(this).hide(); you have to give $('#your_div_id_that _to_hide').hide(); – Abhilash Ravindran C K Dec 14 '17 at 06:02
Thanks ,It's Working – vishnu reji Dec 14 '17 at 06:10
@vishnureji please could you accept the answer if it is working for you.Thank you. – Abhilash Ravindran C K Dec 14 '17 at 06:11
How Can I put some transition effects on the time of show ?? – vishnu reji Dec 14 '17 at 06:13
Could you please tell me what transistion effect you need. Also tell me to which item you have to apply the effect. – Abhilash Ravindran C K Dec 14 '17 at 06:17
Transition effect like fade in for the $('#your_div_id').show(); – vishnu reji Dec 14 '17 at 06:20
For that you can refer this link https://www.w3schools.com/jquery/jquery_fade.asp – Abhilash Ravindran C K Dec 14 '17 at 06:22
Thanks for the reference link – vishnu reji Dec 14 '17 at 06:23
You can use http://api.jquery.com/fadein/ link as well. Best of luck. Thank you for accepting answer. – Abhilash Ravindran C K Dec 14 '17 at 06:24

ryanlee · Answer 3 · 2017-12-14T06:35:48.367

you can get your answer from this: Make one div visible and another invisible

You can use the display property of style. Intialy set the result section style as

style = "display:none" Then the div will not be visible and there won't be any white space.

Once the search results are being populated change the display property using the java script like

document.getElementById("someObj").style.display = "block" Using java script you can make the div invisible

document.getElementById("someObj").style.display = "none

score 0 · Answer 4 · answered Dec 14 '17 at 05:49

0

function showDiv() {
    document.getElementById('myId').style.display='block';
    document.getElementById('myButton').style.display='none';
}

answered Dec 14 '17 at 05:49

Archita Sundaray

77
1
10

Thanks For helping me – vishnu reji Dec 14 '17 at 05:54
i need to hide entire div including the button and make new div visible on same position of the old div – vishnu reji Dec 14 '17 at 06:00

score 0 · Answer 5 · answered Dec 14 '17 at 05:57

Modified from the css wc3schools tryit editor site

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("#desc").toggleClass("blue");
    $("#mybutton").toggleClass("blue");
    });
});
</script>
<style>
.blue {
    display: none;
}
</style>
</head>
<body>

<div id="desc" class="blue">
<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<button id="mybutton">Toggle class</button>

</body>
</html>

score 0 · Answer 6 · answered Dec 14 '17 at 06:34

0

Using jQuery we can achive this:::

**HTML:**
<div class="divClass">  
    My Div Content shows here  
</div>

<button> Click me </button>

**CSS:**
.divClass {
    display: none
}

**JS:**
$('body').on('click', 'button', function() {
    $(this).hide();
    $('.divClass').show();
});

**Output:** 
https: //jsfiddle.net/cvsraghava/8hg786x9/

answered Dec 14 '17 at 06:34

Rag ch

76
2

Thanks For Helping Me, I have already got the answer from above – vishnu reji Dec 14 '17 at 06:59

How to make a button invisible after clicking on it,at that time how to make a div visible?

6 Answers6