I am trying to have a paragraph that is hidden when the page loads, then do a show/hide jquery and also...
2
I am very new to software development. I am creating a paragraph that when you click a button it will display a Spanish version of text instead of English. The English version will load, right now they both load and I am trying to get only the English to load and have the Spanish hidden. I want to toggle onclick between the two paragraphs. I also want to change the button from Spanish to English.
I thank you for any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').on('click', function() {
$('#languageE').toggle();
});
});
$('.Lang').click(function() {
var $this = $(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
{
$this.text('Español');
} else {
this.text('English');
}
});
</script>
</body>
</html>
javascript jquery html toggle
asked Dec 28 '18 at 5:56
TashaTasha
165
add a comment |
2
I am very new to software development. I am creating a paragraph that when you click a button it will display a Spanish version of text instead of English. The English version will load, right now they both load and I am trying to get only the English to load and have the Spanish hidden. I want to toggle onclick between the two paragraphs. I also want to change the button from Spanish to English.
I thank you for any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').on('click', function() {
$('#languageE').toggle();
});
});
$('.Lang').click(function() {
var $this = $(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
{
$this.text('Español');
} else {
this.text('English');
}
});
</script>
</body>
</html>
javascript jquery html toggle
asked Dec 28 '18 at 5:56
TashaTasha
165
What's wrong with your current code?
– Jack Bashford
Dec 28 '18 at 5:59
Hello, thank you for responding. When I run it, both paragraphs load. And when I click the button it doesn't change. However, the only thing that works is that it does hide the English part. Now that I want to switch the name of the button from Espanol to English, it takes two clicks to make the paragraph toggle work.
– Tasha
Dec 28 '18 at 6:07
add a comment |
2
2
2
I am very new to software development. I am creating a paragraph that when you click a button it will display a Spanish version of text instead of English. The English version will load, right now they both load and I am trying to get only the English to load and have the Spanish hidden. I want to toggle onclick between the two paragraphs. I also want to change the button from Spanish to English.
I thank you for any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').on('click', function() {
$('#languageE').toggle();
});
});
$('.Lang').click(function() {
var $this = $(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
{
$this.text('Español');
} else {
this.text('English');
}
});
</script>
</body>
</html>
javascript jquery html toggle
asked Dec 28 '18 at 5:56
TashaTasha
165
I am very new to software development. I am creating a paragraph that when you click a button it will display a Spanish version of text instead of English. The English version will load, right now they both load and I am trying to get only the English to load and have the Spanish hidden. I want to toggle onclick between the two paragraphs. I also want to change the button from Spanish to English.
I thank you for any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').on('click', function() {
$('#languageE').toggle();
});
});
$('.Lang').click(function() {
var $this = $(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
{
$this.text('Español');
} else {
this.text('English');
}
});
</script>
</body>
</html>
javascript jquery html toggle
javascript jquery html toggle
asked Dec 28 '18 at 5:56
TashaTasha
165
asked Dec 28 '18 at 5:56
TashaTasha
165
asked Dec 28 '18 at 5:56
TashaTasha
165
asked Dec 28 '18 at 5:56
TashaTasha
165
asked Dec 28 '18 at 5:56
TashaTasha
165
165
What's wrong with your current code?
– Jack Bashford
Dec 28 '18 at 5:59
Hello, thank you for responding. When I run it, both paragraphs load. And when I click the button it doesn't change. However, the only thing that works is that it does hide the English part. Now that I want to switch the name of the button from Espanol to English, it takes two clicks to make the paragraph toggle work.
– Tasha
Dec 28 '18 at 6:07
add a comment |
What's wrong with your current code?
– Jack Bashford
Dec 28 '18 at 5:59
Hello, thank you for responding. When I run it, both paragraphs load. And when I click the button it doesn't change. However, the only thing that works is that it does hide the English part. Now that I want to switch the name of the button from Espanol to English, it takes two clicks to make the paragraph toggle work.
– Tasha
Dec 28 '18 at 6:07
What's wrong with your current code?
– Jack Bashford
Dec 28 '18 at 5:59
What's wrong with your current code?
– Jack Bashford
Dec 28 '18 at 5:59
Hello, thank you for responding. When I run it, both paragraphs load. And when I click the button it doesn't change. However, the only thing that works is that it does hide the English part. Now that I want to switch the name of the button from Espanol to English, it takes two clicks to make the paragraph toggle work.
– Tasha
Dec 28 '18 at 6:07
Hello, thank you for responding. When I run it, both paragraphs load. And when I click the button it doesn't change. However, the only thing that works is that it does hide the English part. Now that I want to switch the name of the button from Espanol to English, it takes two clicks to make the paragraph toggle work.
– Tasha
Dec 28 '18 at 6:07
add a comment |
4 Answers
4
active
oldest
votes
2
Use this script in code:
<script>
$(document).ready(function() {
$('#languageS').hide();
$('#myBtn').on('click', function() {
if($(this).text() == "Español") {
$(this).text('English')
$('#languageE').hide();
$('#languageS').show();
}
else{
$(this).text('Español')
$('#languageS').hide();
$('#languageE').show();
}
});
});
</script>
Here is the fiddle for the same: https://jsfiddle.net/43qnrek7/
Please let me know if it works for you and doesn't hesitate to ask me again if you face any problem.
Thanks
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
|
show 6 more comments
2
Please try this. This is you are expecting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn" value="Spanish">Español</button>
</div>
<script>
$('#languageS').hide();
$('.Lang').click(function() {
var value=$(this).val();
if(value=='Spanish')
{
$('#languageS').show();
$('#languageE').hide();
$(this).val('English');
$(this).html('English')
}
else
{
$('#languageS').hide();
$('#languageE').show();
$(this).val('Spanish');
$(this).html('Español')
}
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
add a comment |
1
As per your question, here is the solution you need
You can test the solution Here
https://jsfiddle.net/shoesheill/p3bcmgtx/17/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE" >
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS" style="display:none;">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').off().on('click', function() {
$('#languageS').toggle();
$('#languageE').toggle();
let $this=$(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
$this.text('Español');
else
$this.text('English');
});
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:24
SushilSushil
43211
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
add a comment |
1
$(document).ready(function() {
$('#div1').hide();
$('#preview').on('click', function() {
$('#div1').toggle(300);
});
});
you can try like this with 2 div
answered Dec 28 '18 at 6:49
RamRam
45
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%2f53954252%2fi-am-trying-to-have-a-paragraph-that-is-hidden-when-the-page-loads-then-do-a-sh%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Use this script in code:
<script>
$(document).ready(function() {
$('#languageS').hide();
$('#myBtn').on('click', function() {
if($(this).text() == "Español") {
$(this).text('English')
$('#languageE').hide();
$('#languageS').show();
}
else{
$(this).text('Español')
$('#languageS').hide();
$('#languageE').show();
}
});
});
</script>
Here is the fiddle for the same: https://jsfiddle.net/43qnrek7/
Please let me know if it works for you and doesn't hesitate to ask me again if you face any problem.
Thanks
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
|
show 6 more comments
2
Use this script in code:
<script>
$(document).ready(function() {
$('#languageS').hide();
$('#myBtn').on('click', function() {
if($(this).text() == "Español") {
$(this).text('English')
$('#languageE').hide();
$('#languageS').show();
}
else{
$(this).text('Español')
$('#languageS').hide();
$('#languageE').show();
}
});
});
</script>
Here is the fiddle for the same: https://jsfiddle.net/43qnrek7/
Please let me know if it works for you and doesn't hesitate to ask me again if you face any problem.
Thanks
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
|
show 6 more comments
2
2
2
Use this script in code:
<script>
$(document).ready(function() {
$('#languageS').hide();
$('#myBtn').on('click', function() {
if($(this).text() == "Español") {
$(this).text('English')
$('#languageE').hide();
$('#languageS').show();
}
else{
$(this).text('Español')
$('#languageS').hide();
$('#languageE').show();
}
});
});
</script>
Here is the fiddle for the same: https://jsfiddle.net/43qnrek7/
Please let me know if it works for you and doesn't hesitate to ask me again if you face any problem.
Thanks
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
Use this script in code:
<script>
$(document).ready(function() {
$('#languageS').hide();
$('#myBtn').on('click', function() {
if($(this).text() == "Español") {
$(this).text('English')
$('#languageE').hide();
$('#languageS').show();
}
else{
$(this).text('Español')
$('#languageS').hide();
$('#languageE').show();
}
});
});
</script>
Here is the fiddle for the same: https://jsfiddle.net/43qnrek7/
Please let me know if it works for you and doesn't hesitate to ask me again if you face any problem.
Thanks
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
answered Dec 28 '18 at 6:28
vishul gargvishul garg
914
914
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
|
show 6 more comments
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
Thank you very much also. I just tried this one and it works also.
– Tasha
Dec 28 '18 at 6:34
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
This one actually worked I created a test environment and it worked in Visual Studio Code, when I put it into my application on Visual Studio it didn't hide the Spanish paragraph. However when I test it in visual code it works just fine. I have the API at the top of the page in Visual Studio
– Tasha
Dec 28 '18 at 7:41
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Make sure you place this $('#languageS').hide(); in document.ready or on load function whichever you used in you application.
– vishul garg
Dec 28 '18 at 7:47
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Hi, I actually put it like you have it.
– Tasha
Dec 28 '18 at 7:51
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
Are you getting any error in the console?
– vishul garg
Dec 28 '18 at 7:55
|
show 6 more comments
2
Please try this. This is you are expecting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn" value="Spanish">Español</button>
</div>
<script>
$('#languageS').hide();
$('.Lang').click(function() {
var value=$(this).val();
if(value=='Spanish')
{
$('#languageS').show();
$('#languageE').hide();
$(this).val('English');
$(this).html('English')
}
else
{
$('#languageS').hide();
$('#languageE').show();
$(this).val('Spanish');
$(this).html('Español')
}
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
add a comment |
2
Please try this. This is you are expecting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn" value="Spanish">Español</button>
</div>
<script>
$('#languageS').hide();
$('.Lang').click(function() {
var value=$(this).val();
if(value=='Spanish')
{
$('#languageS').show();
$('#languageE').hide();
$(this).val('English');
$(this).html('English')
}
else
{
$('#languageS').hide();
$('#languageE').show();
$(this).val('Spanish');
$(this).html('Español')
}
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
add a comment |
2
2
2
Please try this. This is you are expecting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn" value="Spanish">Español</button>
</div>
<script>
$('#languageS').hide();
$('.Lang').click(function() {
var value=$(this).val();
if(value=='Spanish')
{
$('#languageS').show();
$('#languageE').hide();
$(this).val('English');
$(this).html('English')
}
else
{
$('#languageS').hide();
$('#languageE').show();
$(this).val('Spanish');
$(this).html('Español')
}
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
Please try this. This is you are expecting.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE">
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn" value="Spanish">Español</button>
</div>
<script>
$('#languageS').hide();
$('.Lang').click(function() {
var value=$(this).val();
if(value=='Spanish')
{
$('#languageS').show();
$('#languageE').hide();
$(this).val('English');
$(this).html('English')
}
else
{
$('#languageS').hide();
$('#languageE').show();
$(this).val('Spanish');
$(this).html('Español')
}
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
edited Dec 28 '18 at 6:27
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
answered Dec 28 '18 at 6:20
VinothRajaVinothRaja
1,051416
1,051416
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
add a comment |
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
Hi Thank you, Yes that works. However, how do I hide the Spanish paragraph when it loads so both paragraphs do not show initially?
– Tasha
Dec 28 '18 at 6:25
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
@Tasha try this updated answer
– VinothRaja
Dec 28 '18 at 6:27
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
Hi Thank you, yes, that worked! Thank you so much... I have been trying and searching this website for a week.
– Tasha
Dec 28 '18 at 6:32
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
@Tasha My pleasure. Please accept this answer (Click TiK mark)
– VinothRaja
Dec 28 '18 at 6:34
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
When I tried it in Visual Studio 2017 it didn't work. I put it in a test run in Visual Studio Code and it works just fine. I have the API at the top of the page in Visual Studio.
– Tasha
Dec 28 '18 at 7:44
add a comment |
1
As per your question, here is the solution you need
You can test the solution Here
https://jsfiddle.net/shoesheill/p3bcmgtx/17/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE" >
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS" style="display:none;">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').off().on('click', function() {
$('#languageS').toggle();
$('#languageE').toggle();
let $this=$(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
$this.text('Español');
else
$this.text('English');
});
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:24
SushilSushil
43211
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
add a comment |
1
As per your question, here is the solution you need
You can test the solution Here
https://jsfiddle.net/shoesheill/p3bcmgtx/17/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE" >
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS" style="display:none;">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').off().on('click', function() {
$('#languageS').toggle();
$('#languageE').toggle();
let $this=$(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
$this.text('Español');
else
$this.text('English');
});
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:24
SushilSushil
43211
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
add a comment |
1
1
1
As per your question, here is the solution you need
You can test the solution Here
https://jsfiddle.net/shoesheill/p3bcmgtx/17/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE" >
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS" style="display:none;">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').off().on('click', function() {
$('#languageS').toggle();
$('#languageE').toggle();
let $this=$(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
$this.text('Español');
else
$this.text('English');
});
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:24
SushilSushil
43211
As per your question, here is the solution you need
You can test the solution Here
https://jsfiddle.net/shoesheill/p3bcmgtx/17/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modal Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="hidetest.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div class="container" id="languageE" >
<p>
Starting in 2014.
</p>
</div>
<div class="container" id="languageS" style="display:none;">
<p>A partir del 2014...
</p>
</div>
<div>
<button class="Lang" id="myBtn">Español</button>
</div>
<script>
$(document).ready(function() {
$('#myBtn').off().on('click', function() {
$('#languageS').toggle();
$('#languageE').toggle();
let $this=$(this);
$this.toggleClass('Lang');
if($this.hasClass('Lang'))
$this.text('Español');
else
$this.text('English');
});
});
</script>
</body>
</html>
answered Dec 28 '18 at 6:24
SushilSushil
43211
edited Dec 28 '18 at 6:40
answered Dec 28 '18 at 6:24
SushilSushil
43211
answered Dec 28 '18 at 6:24
SushilSushil
43211
answered Dec 28 '18 at 6:24
SushilSushil
43211
43211
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
add a comment |
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
Hi, Thank you. The button name didn't change though. And want to show/hide one paragraph at a time.
– Tasha
Dec 28 '18 at 6:27
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha I got you, wait a while I will update it.
– Sushil
Dec 28 '18 at 6:30
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
@Tasha Please Check this updated answer
– Sushil
Dec 28 '18 at 6:43
add a comment |
1
$(document).ready(function() {
$('#div1').hide();
$('#preview').on('click', function() {
$('#div1').toggle(300);
});
});
you can try like this with 2 div
answered Dec 28 '18 at 6:49
RamRam
45
add a comment |
1
$(document).ready(function() {
$('#div1').hide();
$('#preview').on('click', function() {
$('#div1').toggle(300);
});
});
you can try like this with 2 div
answered Dec 28 '18 at 6:49
RamRam
45
add a comment |
1
1
1
$(document).ready(function() {
$('#div1').hide();
$('#preview').on('click', function() {
$('#div1').toggle(300);
});
});
you can try like this with 2 div
answered Dec 28 '18 at 6:49
RamRam
45
$(document).ready(function() {
$('#div1').hide();
$('#preview').on('click', function() {
$('#div1').toggle(300);
});
});
you can try like this with 2 div
answered Dec 28 '18 at 6:49
RamRam
45
answered Dec 28 '18 at 6:49
RamRam
45
answered Dec 28 '18 at 6:49
RamRam
45
answered Dec 28 '18 at 6:49
RamRam
45
45
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53954252%2fi-am-trying-to-have-a-paragraph-that-is-hidden-when-the-page-loads-then-do-a-sh%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
What's wrong with your current code?
– Jack Bashford
Dec 28 '18 at 5:59
Hello, thank you for responding. When I run it, both paragraphs load. And when I click the button it doesn't change. However, the only thing that works is that it does hide the English part. Now that I want to switch the name of the button from Espanol to English, it takes two clicks to make the paragraph toggle work.
– Tasha
Dec 28 '18 at 6:07