CODEWITHSUNDEEP
javascripthtmlcss
Carlvic Lim
Carlvic Lim

Reputation: 285

How to make click reveal in css/js?

Just want to know how to make click reveal when I click a button the word "Phone" will change to "+971235051"

<button type="button" class="btn btn-primary">Phone</button>
<span>+971235051</span>

Any hint for this?I found a toggle, But can't find for click reveal.

Thankyou

Upvotes: 2

Views: 2428

Answers (6)

vicky patel
vicky patel

Reputation: 705

<button type="button" id="btn" onclick="document.getElementById('btn').innerHTML = '+971235051'" class="btn btn-primary">Phone</button>

Upvotes: 1

Puka
Puka

Reputation: 1575

Sorry, this answer is off tracks

Maybe look after the new HTML 5.1 element: <summary> (here goes the MDN reference):

<details>
  <summary>Phone</summary>
  <p>+971235051</p>
</details>

If you want a more customizable way, you should try it using JQuery and the toggleClass() method:

Edited the code, it was messy, sorry ^^

$("button").click(function() {
  $("span").toggleClass("btn_active");
});
span {
  display: none;
}

.btn_active {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary">Phone</button>
<span>+971235051</span>

W3C reference

Hope it may help :)

Upvotes: 2

Nisal Edu
Nisal Edu

Reputation: 7591

Try this with jquery

$('#btn').on('click', function() {
    if($('#btn').text() != 'Phone') {
        $('#btn').text('Phone');
    } else {
        $('#btn').text('+971235051');        
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button type="button" id="btn" class="btn btn-primary">Phone</button>

This with javascript

function fns() {
  var elem = document.getElementById("btn");
  if (elem.innerHTML == "Phone") {
    elem.innerHTML = "+971235051";
  } else {
    elem.innerHTML = "Phone";
  }

}
<button type="button" id="btn" onclick="fns()" class="btn btn-primary">Phone</button>

Upvotes: 4

oetoni
oetoni

Reputation: 3877

here it is, just take advantage of the onclick event handler in JS, attach a custom function to execute n it and in the function do the text change ;)

function myFunction()
{
document.getElementById("toClick").innerHTML = "+971235051";
}
<button onclick="myFunction()" id="toClick">Phone</button>

Upvotes: 2

Super User
Super User

Reputation: 9642

You can use :focus for this. check updated snippet below...

.num, button:focus .txt  {
  display: none;
}
button:focus .num {
  display: block;
}
<button type="button" class="btn btn-primary"><span class="txt">Phone</span>
<span class="num">+971235051</span>
</button>

Upvotes: 6

brk
brk

Reputation: 50316

Create a function and user innerHTML to change the text of the button

function changeText(elem) {
  elem.innerHTML = "+971235051"

}
<button type="button" class="btn btn-primary" onclick="changeText(this)">Phone</button>

Upvotes: 2

Related Questions