CODEWITHSUNDEEP
javascriptjqueryhtmlcsstext
Ooker
Ooker

Reputation: 3054

How to swap text back and forth when clicking on it?

What I need is to swap back and forth the text ____ (a gap) to Word by clicking it. I don't want to have a button. The user should only need to click at the position of the gap.

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>

Upvotes: 2

Views: 3539

Answers (4)

Raman Sahasi
Raman Sahasi

Reputation: 31901

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>

Having multiple hidden words

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>

Making ________ appears 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>

For both plurals and singulars

Just change the line:

var replacestr = new RegExp(value, "g");

to:

var replacestr = new RegExp('\\b'+value+'\\b', "g");

The final code would then look like:

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');
    words.push('lexicons');
    
  </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. In this paragraph, lexicons is a new word that's added, so don't forget to push 'lexicons' in your array.
  </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('\\b'+value+'\\b', "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">_______</span>')
      });
    });
  </script>
</body>

</html>

Upvotes: 2

Shankar Shastri
Shankar Shastri

Reputation: 1154

<label id="example-five" for="example-five-checkbox">_____</label>

Reference: https://jsfiddle.net/n1rb2y57/ But see to that you choose proper background color in css matching with the website color.

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15933

The Label's for attribute must contain the id of the checkbox 

#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;
}
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>

Upvotes: 2

kukkuz
kukkuz

Reputation: 42360

Is this what you expect?

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

Note the for attribute in label- it must have the id of the input checkbox

#example {
  position: relative;
  cursor: pointer;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>

Upvotes: 2

Related Questions