matty matty -4 years ago 147
CSS Question

How do you set paragraph to show once a button has been clicked?

If a person has created a paragraph with text in it but he/she only wants it to show up IF the person has clicked the button.

I have created my button and paragraph but the paragraph keeps coming up on the browser even without me clicking the button, so how do I "hide" the paragraph inside the btn until it's been clicked?



#Belfastbutton {
position: absolute;
color: green;
top: 310px;
left: 130px;
height: 40px;
width: 120px;
background-color: #e0e0d1;
border-radius: 5px;
padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Belfastbutton">Click for Details</button>
<p id=Belfastcontactdetails>34 Boucher Road, Belfast. <br>Co.Antrim<br>BT27</p>




Answer Source

Set your p to display:none in CSS.

Use .fadeIn() to show the p on button click.

$('button').click(function() {
  
  $('p').fadeIn();
  
});
#Belfastbutton {
  color: green;
  height: 40px;
  width: 120px;
  background-color: #e0e0d1;
  border-radius: 5px;
  padding: 5px;
}

#Belfastcontactdetails {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Belfastbutton">Click</button>
 <p id=Belfastcontactdetails>text</p>
 </div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download