How to change toggle button text when pressed?

Question

I would like to be able to press a button that says "hide" and then say "show" when the user clicks the button. In the code below the toggle part works, but now I need the "hide" text to turn to "show" once the content is hidden.

I took the toggle code from: http://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U

 <script type="text/javascript">
    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }
    </script>

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="javascript:toggle('pos')">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

Do you have jQuery included in your head tag? If so, you could do it in a much simpler way with .toggle() http://api.jquery.com/toggle/ — Moby's Stunt Double, Apr 17 '13 at 17:21
I know it's messed up. The person who made this code dumped it on me with "make this hide text say show. GOOD LUCK!" — Rayray Silby, Apr 17 '13 at 17:37
Possible duplicate of http://stackoverflow.com/questions/10671174/javascript-changing-button-text-on-onclick Or http://stackoverflow.com/questions/6475768/change-button-text-onclick — hop, Apr 17 '13 at 17:53

seaBass · Accepted Answer · 2013-04-17T18:15:21.933

5

Change your button code to something like this:

<div class="ISHide" onclick="toggle(this)"><a href="#" >Hide Products</a></div>

And change your script to something like this

<script type="text/javascript">
function toggle (t) {
if (t.childNodes[0].innerHTML == "Hide Products") {
    t.childNodes[0].innerHTML = "Show Products";
} else {
    t.childNodes[0].innerHTML = "Hide Products";
}
}
</script>

edited Apr 17 '13 at 18:15

answered Apr 17 '13 at 17:41

seaBass

585
1
6
17

The button changes (YAY!) but the toggle turns off. I put back in the original code: to see if the toggle will turn back on - which it did - but then it goes back to not changing text. I guess I have to mess around with that a little more, but the text DID change so that's a step in the right direction! – Rayray Silby Apr 17 '13 at 17:55
See if this works better for you. I changed the code in my answer. – seaBass Apr 17 '13 at 18:16
No, the ul tag isn't disappearing; it's a link and still changes to show/hide which is a good sign. :) – Rayray Silby Apr 17 '13 at 18:30

score 3 · Answer 2 · answered Apr 17 '13 at 17:39

Since your question is tagged jQuery, use jQuery:

<div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>


$(".hideLink").on("click", function(){
    if($(this).text()=="Hide Products - ")
    {
        $(this).text("Show Products - ");
    } else {
        $(this).text("Hide Products - ");
    }
    $(".ISProductBody").toggle(); 

    return false;
});

Example: http://jsfiddle.net/calder12/KCj3r/

score 2 · Answer 3 · answered Dec 21 '15 at 15:10

My "answer" is a modification of Rick Calder's answer. I used the code provided for a similar scenario, but it had HTML tags inside the button (in this case, Font Awesome icons). I figured it might help some people apply the solution to other situations.

The only modifications I had to do was to change ".text" for ".html" and added ".addClass" / ".removeClass" to change the button styling. (CSS is not included since it is trivial here.)

Here is the code I used:

$(".expand-button .button").on("click", function(){
    if($(this).html()==" Watch Video <i class=\"fa fa-play\"></i> ")
    {
        $(this).html(" Hide Video <i class=\"fa fa-times\"></i> ");
        $(this).addClass("secondary");
    } else {
        $(this).html(" Watch Video <i class=\"fa fa-play\"></i> ");
        $(this).removeClass("secondary");
    }
    $(".expand-button-content").fadeToggle();
});

Thank you, Rick and the OP.

Nipun Aggarwal · Answer 4 · 2017-07-29T03:39:02.340

0

var button = document.querySelector(".button")
var text   = document.querySelector(".text")
var t
button.addEventListener("click",function(){


    if(text.textContent=="Like"){
        t = "Liked"
    }
    else{
        t="Like"
    }
    text.textContent=t;
})

This is an Example of a Like button which changes to Liked. The approach is really simple, if the text is Like, the variable t is set to "liked" and vice versa AND t then replaces the text content. Worked for me Cheers, :D

edited Jul 29 '17 at 03:39

answered Jul 24 '17 at 05:09

Nipun Aggarwal

1
1

Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Jul 24 '17 at 05:27

score 0 · Answer 5 · answered Aug 17 '18 at 19:34

0

TextBox.innerHTML = " ";
ButtonId.onclick = function(){
if (TextBox.innerHTML == " ") {
TextBox.innerHTML = "HI";
}
else {
TextBox.innerHTML = " ";
}
}

<a href="http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html">ReadMore:</a>
<img id="ButtonId" src="https://www.w3schools.com/tags/smiley.gif" width="107" height="98">
<p id="TextBox"> </p>

answered Aug 17 '18 at 19:34

Aliza Khan

1

An explanation to the code will make for better answer – chevybow Aug 17 '18 at 19:54

Dan Swain · Answer 6 · 2022-03-04T21:36:06.550

The following shows the button text that is being toggled clearly at the top of the function. It makes use of the Javasript ternary operator for brevity. It would also allow you to cycle through more than two text labels if that was necessary. If only toggling two values, then the ordering of the label values in labels does not matter .

$(".expand-button .button").on("click", function(e){
  const labels = ['Show', 'Hide']
  let idx = labels.indexOf(e.target.innerHTML) + 1
  idx == labels.length ? idx = 0 : idx
  e.target.innerHTML = labels[idx]
});

And an even shorter solution using just the ternary operator if only toggling two values:

    e.target.innerHTML == 'Show' ? e.target.innerHTML == 'Hide' : e.target.innerHTML == 'Show'

How to change toggle button text when pressed?

6 Answers6