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>
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>
-
Where is text ""____"" at
htmlat Question? – guest271314 Commented Aug 6, 2016 at 15:35 -
oh, the given code is copied from the link. It should be replaced to
Show– Ooker Commented Aug 7, 2016 at 5:21
4 Answers
Reset to default 2This is the code that will meet your requirement.
<!DOCTYPE html>
<html>
<body>
This is a paragraph. Click on the next word -> <span id="word" onclick="toggle()">____</span> <- 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./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./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./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>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>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><label id="example-five" for="example-five-checkbox">_____</label>
Reference: https://jsfiddle/n1rb2y57/ But see to that you choose proper background color in css matching with the website color.