Ooker Ooker - 3 months ago 20
CSS Question

How to change change text back and forth when clicking it?

What I need is to change back and forth the text "____" to "Word" by clicking it. I don't want to have a button.

I see this page describes exactly what I need, especially the CSS-Only Way, but when I try it on the TryIt Editor, either it or the jQuery-Way doesn't work.

Here is the CSS Way:

</style>
#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
</style>

<input id="example-checkbox" type="checkbox">
<label for="example" id="example">Show</label>

Answer

This is the code that will meet your requirement.

<!DOCTYPE html>
<html>

<body>
  This is a paragraph. Click on the next word -&gt; <span id="word" onclick="toggle()">____</span> &lt;- Have you clicked on previous word.

  <p id="demo"></p>

  <script>
    function toggle() {
      var word = document.getElementById("word").innerHTML;
      if (word.split('_').join('').trim().length === 0) {
        document.getElementById("word").innerHTML = "word";
      } else {
        document.getElementById("word").innerHTML = "_____";
      }
    }
  </script>
</body>

</html>


EDIT #2

The below snippet will word according to your updated requirements.

In the code below, just take a look at script in <head> section of the code.

  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
  </script>

Here, you just have to push the words that you want to toggle with _____ in the array words. Once the words are pushed in this array, they will automatically convert, back and forth to underscores. Just push any different word in this array from the paragraph and see the transitions yourself.

span {
  color: red
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
  </script>

</head>

<body>

  <p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself.
  </p>

  <script>
    function toggle(element) {
      if (element.innerHTML.split('_').join('').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
    }

    $.each(words, function(index, value) {
      var replacestr = new RegExp(value, "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)"> ' + value + ' </span>')
      });
    });
  </script>
</body>

</html>


EDIT#3

If you want ________ to appear first when page loads just replace

return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)"> ' + value + ' </span>')

with

return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">____________</span>')

The final code will be:

span {
  color: red
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var words = [];

    words.push('vocabulary');
    words.push('lexicon');
  </script>

</head>

<body>

  <p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself.
  </p>

  <script>
    function toggle(element) {
      if (element.innerHTML.split('_').join('').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
    }

    $.each(words, function(index, value) {
      var replacestr = new RegExp(value, "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">_______</span>')
      });
    });
  </script>
</body>

</html>

Comments