CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5021292
user5021292

Reputation:

How to show text once clicked the button then if you click button again, it will disapear?

I am doing a website for college for apart of an assignment. Anyway I created a button and styled it with CSS. I want it so that once the user clicks the button, it will display text then if the user clicks the button again, it will disappear. I tried coding it with Jquery (because its much easier) but even though I think it's right it is not showing up the way I want to in the browser. Please help 

Jquery
$(document).ready(function() {
  $("Belfastbutton").click(function() {
    $("Belfastcontactdetails").toggle();
  });
});
#Belfastbutton {
  position: absolute;
  color: green;
  top: 310px;
  left: 130px;
  height: 40px;
  width: 120px;
  background-color: #e0e0d1;
  border-radius: 5px;
  padding: 5px;
}

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

Upvotes: 0

Views: 657

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

For infos:

You could also relay on CSS:

[for="Belfastbutton"] {
  position: absolute;
  color: green;
  top: 310px;
  left: 130px;
  line-height: 40px;
  width: 120px;
  background-color: #e0e0d1;
  border-radius: 5px;
  padding: 0 5px;
  text-align:center;
  box-shadow:2px 2px 2px 1px gray;
  transition:0.05s;
 }
#Belfastcontactdetails {
color: green;
display:none;
}
#Belfastbutton:checked ~ #Belfastcontactdetails {
display:block;
}
/* hide input */
#Belfastbutton {position:absolute;
right:100vw;
}
/* add visual behavior to label */
[for="Belfastbutton"]:active { 
  box-shadow:-2px -2px 2px 1px gray;
}
<h1 id="Belfast">Belfast</h1>
 <label for="Belfastbutton">Click for Details</label>
 <input type="checkbox" id="Belfastbutton"/>
 <p id="Belfastcontactdetails">
 34 Boucher Road, Belfast.
 <br> Co.Antrim
 <br> BT27
 </p>

Upvotes: 0

larz
larz

Reputation: 5766

You're just missing the # when selecting your button and p.

$(document).ready(function() {
  $("#Belfastbutton").click(function() {
    $("#Belfastcontactdetails").toggle();
  });
});
#Belfastbutton {
  position: absolute;
  color: green;
  top: 310px;
  left: 130px;
  height: 40px;
  width: 120px;
  background-color: #e0e0d1;
  border-radius: 5px;
  padding: 5px;
}

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

Upvotes: 2

Related Questions