How to change the button text of show/hide or spoiler button while on click in html , in the following code
-1
I want to change the text of the Show/hide button or spoiler button while on click by users. In default condition the button text is written as Show and when user click the button the button text should replace with Hide and again if the user click on Hide the button text should change to Show. How to do that,please anyone help me and i will be very thankful.
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>html
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
add a comment |
-1
I want to change the text of the Show/hide button or spoiler button while on click by users. In default condition the button text is written as Show and when user click the button the button text should replace with Hide and again if the user click on Hide the button text should change to Show. How to do that,please anyone help me and i will be very thankful.
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>html
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
Possible duplicate of Show/Hide button without reload page
– Smollet777
Nov 15 '18 at 12:56
What have you tried already to make the text change?
– Martin
Nov 15 '18 at 13:01
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery . @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:16
@KatrinaPathak It's not possible without using some JavaScript. In your example you have used JavaScript already. The answers already provided will achieve what you are looking for
– Martin
Nov 15 '18 at 13:19
Sir, I am trying to do this blogger blogspot but it is not working @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:32
add a comment |
-1
-1
-1
I want to change the text of the Show/hide button or spoiler button while on click by users. In default condition the button text is written as Show and when user click the button the button text should replace with Hide and again if the user click on Hide the button text should change to Show. How to do that,please anyone help me and i will be very thankful.
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>html
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
I want to change the text of the Show/hide button or spoiler button while on click by users. In default condition the button text is written as Show and when user click the button the button text should replace with Hide and again if the user click on Hide the button text should change to Show. How to do that,please anyone help me and i will be very thankful.
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div><button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>html
html
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
edited Nov 15 '18 at 13:38
Katrina Pathak
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
asked Nov 15 '18 at 12:54
Katrina PathakKatrina Pathak
917
917
Possible duplicate of Show/Hide button without reload page
– Smollet777
Nov 15 '18 at 12:56
What have you tried already to make the text change?
– Martin
Nov 15 '18 at 13:01
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery . @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:16
@KatrinaPathak It's not possible without using some JavaScript. In your example you have used JavaScript already. The answers already provided will achieve what you are looking for
– Martin
Nov 15 '18 at 13:19
Sir, I am trying to do this blogger blogspot but it is not working @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:32
add a comment |
Possible duplicate of Show/Hide button without reload page
– Smollet777
Nov 15 '18 at 12:56
What have you tried already to make the text change?
– Martin
Nov 15 '18 at 13:01
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery . @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:16
@KatrinaPathak It's not possible without using some JavaScript. In your example you have used JavaScript already. The answers already provided will achieve what you are looking for
– Martin
Nov 15 '18 at 13:19
Sir, I am trying to do this blogger blogspot but it is not working @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:32
Possible duplicate of Show/Hide button without reload page
– Smollet777
Nov 15 '18 at 12:56
Possible duplicate of Show/Hide button without reload page
– Smollet777
Nov 15 '18 at 12:56
What have you tried already to make the text change?
– Martin
Nov 15 '18 at 13:01
What have you tried already to make the text change?
– Martin
Nov 15 '18 at 13:01
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery . @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:16
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery . @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:16
@KatrinaPathak It's not possible without using some JavaScript. In your example you have used JavaScript already. The answers already provided will achieve what you are looking for
– Martin
Nov 15 '18 at 13:19
@KatrinaPathak It's not possible without using some JavaScript. In your example you have used JavaScript already. The answers already provided will achieve what you are looking for
– Martin
Nov 15 '18 at 13:19
Sir, I am trying to do this blogger blogspot but it is not working @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:32
Sir, I am trying to do this blogger blogspot but it is not working @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:32
add a comment |
3 Answers
3
active
oldest
votes
2
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
So you you have many<div id="spoiler">with corresponding buttons. Am i right? You need to add listener to each button then.
– Smollet777
Nov 15 '18 at 13:42
add a comment |
0
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
add a comment |
0
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319947%2fhow-to-change-the-button-text-of-show-hide-or-spoiler-button-while-on-click-in-h%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
So you you have many<div id="spoiler">with corresponding buttons. Am i right? You need to add listener to each button then.
– Smollet777
Nov 15 '18 at 13:42
add a comment |
2
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
So you you have many<div id="spoiler">with corresponding buttons. Am i right? You need to add listener to each button then.
– Smollet777
Nov 15 '18 at 13:42
add a comment |
2
2
2
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
edited Nov 15 '18 at 13:12
answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
answered Nov 15 '18 at 13:06
Smollet777Smollet777
1,36011015
1,36011015
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
So you you have many<div id="spoiler">with corresponding buttons. Am i right? You need to add listener to each button then.
– Smollet777
Nov 15 '18 at 13:42
add a comment |
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
So you you have many<div id="spoiler">with corresponding buttons. Am i right? You need to add listener to each button then.
– Smollet777
Nov 15 '18 at 13:42
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
I am trying to do this blogger blogspot but it is not working @Smollet777
– Katrina Pathak
Nov 15 '18 at 13:33
So you you have many
<div id="spoiler"> with corresponding buttons. Am i right? You need to add listener to each button then.– Smollet777
Nov 15 '18 at 13:42
So you you have many
<div id="spoiler"> with corresponding buttons. Am i right? You need to add listener to each button then.– Smollet777
Nov 15 '18 at 13:42
add a comment |
0
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
add a comment |
0
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
add a comment |
0
0
0
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
answered Nov 15 '18 at 13:03
ElusiveCoderElusiveCoder
1,2601220
1,2601220
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
add a comment |
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:15
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
For this you need to use checkbox workaround for without js and jquery approach.
– ElusiveCoder
Nov 15 '18 at 13:16
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
See this, and you'll understand it...sitepoint.com/…
– ElusiveCoder
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Sir, I am trying to do this blogger blogspot but it is not working @CodeGator
– Katrina Pathak
Nov 15 '18 at 13:34
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
Can you share the URL you're talking about?
– ElusiveCoder
Nov 15 '18 at 13:36
add a comment |
0
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
add a comment |
0
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
add a comment |
0
0
0
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
edited Nov 15 '18 at 13:11
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
answered Nov 15 '18 at 13:02
SiavashSiavash
1,89231426
1,89231426
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
add a comment |
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Not working in html @Siavash Ghanbari, Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery .
– Katrina Pathak
Nov 15 '18 at 13:17
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
Sir, I am trying to do this blogger blogspot but it is not working @Siavash Ghanbari
– Katrina Pathak
Nov 15 '18 at 13:35
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
first of all jQuery is optional, but you have to use JavaScript, and this code worked, I test it before post here. and finally there is no another way and I don't know why people gave down-vote to this answer!!!
– Siavash
Nov 15 '18 at 13:56
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319947%2fhow-to-change-the-button-text-of-show-hide-or-spoiler-button-while-on-click-in-h%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of Show/Hide button without reload page
– Smollet777
Nov 15 '18 at 12:56
What have you tried already to make the text change?
– Martin
Nov 15 '18 at 13:01
Without using javascript and jquery is it not possible ?Because for certain case i dont want to use javascript /jquery . @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:16
@KatrinaPathak It's not possible without using some JavaScript. In your example you have used JavaScript already. The answers already provided will achieve what you are looking for
– Martin
Nov 15 '18 at 13:19
Sir, I am trying to do this blogger blogspot but it is not working @MartinParkin
– Katrina Pathak
Nov 15 '18 at 13:32