Changing text back and forth during div eventcontenteditable change eventsHow to change the text of a button in jQuery?jQuery bxSlider issueSimple content change. Prev - Next Changes contentjQuery checkbox change and click eventjQuery checkbox checked state changed eventJquery next prev with textShow only first 5 divs accross multiple columns with show more button using JQueryjQuery Event : Detect changes to the html/text of a divJquery hover state - text change
Could the government trigger by-elections to regain a majority?
When did computers stop checking memory on boot?
How would a village use its river that it shares with another village downstream?
Is this good to say congrats to CEO on completion of x years?
Why is the Tm defined as the temperature at which 50% of dsDNA has changed into ssDNA?
What is the name/purpose of this component?
Has any object launched from Earth permanently gone into the sun?
Stack class in Java 8
What is negative current?
Why are walk-ins for Global Entry interview typically only accepted when arriving from an international flight?
Do Milankovitch Cycles fully explain climate change?
Is there a standard terminology for female equivalents of terms such as 'Kingdom' and if so, what are the most common terms?
Is there a "right" way to interpret a novel? If so, how do we make sure our novel is interpreted correctly?
Is there a star over my head?
Are there any space probes or landers which regained communication after being lost?
My favorite color is blue what is your favorite color?
Guitar beginner - What does this card show?
Was Robin Hood's point of view ethically sound?
What's the biggest difference between these two photos?
Job offer without any details but asking me to withdraw other applications - is it normal?
2.5 year old daughter refuses to take medicine
How would two worlds first establish an exchange rate between their currencies
Is there a sentence that begins with “them”?
Do any aircraft carry boats?
Changing text back and forth during div event
contenteditable change eventsHow to change the text of a button in jQuery?jQuery bxSlider issueSimple content change. Prev - Next Changes contentjQuery checkbox change and click eventjQuery checkbox checked state changed eventJquery next prev with textShow only first 5 divs accross multiple columns with show more button using JQueryjQuery Event : Detect changes to the html/text of a divJquery hover state - text change
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I am currently using Murach's 3rd edition js/jq as a reference. I am trying to change a text from "Show more" to "Show less," but it seems to not be working at all no matter what I am doing at the moment. The entire code works, I am just trying to replace the text from "Show more" to "Show less" when clicking an element. Can anyone help me out?
Live Demo that shows all html, js, and css: https://jsfiddle.net/yu8pzr0j/
$(document).ready(function(evt)
$("#jdom a").click(function()
$(this).prev().toggleClass("hide").toggleText();
if ($(this).attr("class") != "hide")
$(this).next().hide().text("Show more");
else
$(this).next().show().text("Show less");
evt.preventDefault();
);
);
javascript jquery
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
add a comment |
0
I am currently using Murach's 3rd edition js/jq as a reference. I am trying to change a text from "Show more" to "Show less," but it seems to not be working at all no matter what I am doing at the moment. The entire code works, I am just trying to replace the text from "Show more" to "Show less" when clicking an element. Can anyone help me out?
Live Demo that shows all html, js, and css: https://jsfiddle.net/yu8pzr0j/
$(document).ready(function(evt)
$("#jdom a").click(function()
$(this).prev().toggleClass("hide").toggleText();
if ($(this).attr("class") != "hide")
$(this).next().hide().text("Show more");
else
$(this).next().show().text("Show less");
evt.preventDefault();
);
);
javascript jquery
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
2
Could you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example
– Rayon
Mar 28 at 7:43
share your html snippet
– Dood
Mar 28 at 7:46
Added live demo
– speeddemon0
Mar 28 at 7:53
add a comment |
0
0
0
I am currently using Murach's 3rd edition js/jq as a reference. I am trying to change a text from "Show more" to "Show less," but it seems to not be working at all no matter what I am doing at the moment. The entire code works, I am just trying to replace the text from "Show more" to "Show less" when clicking an element. Can anyone help me out?
Live Demo that shows all html, js, and css: https://jsfiddle.net/yu8pzr0j/
$(document).ready(function(evt)
$("#jdom a").click(function()
$(this).prev().toggleClass("hide").toggleText();
if ($(this).attr("class") != "hide")
$(this).next().hide().text("Show more");
else
$(this).next().show().text("Show less");
evt.preventDefault();
);
);
javascript jquery
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
I am currently using Murach's 3rd edition js/jq as a reference. I am trying to change a text from "Show more" to "Show less," but it seems to not be working at all no matter what I am doing at the moment. The entire code works, I am just trying to replace the text from "Show more" to "Show less" when clicking an element. Can anyone help me out?
Live Demo that shows all html, js, and css: https://jsfiddle.net/yu8pzr0j/
$(document).ready(function(evt)
$("#jdom a").click(function()
$(this).prev().toggleClass("hide").toggleText();
if ($(this).attr("class") != "hide")
$(this).next().hide().text("Show more");
else
$(this).next().show().text("Show less");
evt.preventDefault();
);
);
javascript jquery
javascript jquery
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
edited Mar 28 at 8:01
speeddemon0
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
asked Mar 28 at 7:42
speeddemon0speeddemon0
32 bronze badges
32 bronze badges
2
Could you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example
– Rayon
Mar 28 at 7:43
share your html snippet
– Dood
Mar 28 at 7:46
Added live demo
– speeddemon0
Mar 28 at 7:53
add a comment |
2
Could you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example
– Rayon
Mar 28 at 7:43
share your html snippet
– Dood
Mar 28 at 7:46
Added live demo
– speeddemon0
Mar 28 at 7:53
2
2
Could you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example
– Rayon
Mar 28 at 7:43
Could you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example
– Rayon
Mar 28 at 7:43
share your html snippet
– Dood
Mar 28 at 7:46
share your html snippet
– Dood
Mar 28 at 7:46
Added live demo
– speeddemon0
Mar 28 at 7:53
Added live demo
– speeddemon0
Mar 28 at 7:53
add a comment |
2 Answers
2
active
oldest
votes
0
Try this
- show and hide not changing the class name of the element.Its just changing the display property
- So you need to toggle the class based on the condition
elem.hasClass() - You need to change the class name to previous element.So define the previous element before the condition
$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
add a comment |
0
See this solution
- Just added a data attribute to the anchor tag
- added same value as a class to content
- than simple toggle with that data attribute
posted in jsFiddle https://jsfiddle.net/95gjd3ew/5/
$("#jdom a").click(function(e)
e.preventDefault();
if($(this).data("expand"))
var cls = $(this).data("expand");
$("."+cls).toggle();
if($(this).text()=="Show more")
$(this).html("Show less");
else
$(this).html("Show more");
);
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
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/4.0/"u003ecc by-sa 4.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%2f55392394%2fchanging-text-back-and-forth-during-div-event%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this
- show and hide not changing the class name of the element.Its just changing the display property
- So you need to toggle the class based on the condition
elem.hasClass() - You need to change the class name to previous element.So define the previous element before the condition
$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
add a comment |
0
Try this
- show and hide not changing the class name of the element.Its just changing the display property
- So you need to toggle the class based on the condition
elem.hasClass() - You need to change the class name to previous element.So define the previous element before the condition
$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
add a comment |
0
0
0
Try this
- show and hide not changing the class name of the element.Its just changing the display property
- So you need to toggle the class based on the condition
elem.hasClass() - You need to change the class name to previous element.So define the previous element before the condition
$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
Try this
- show and hide not changing the class name of the element.Its just changing the display property
- So you need to toggle the class based on the condition
elem.hasClass() - You need to change the class name to previous element.So define the previous element before the condition
$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>$(document).ready(function()
$("#jdom a").click(function(evt)
var pre = $(this).prev();
if (pre.hasClass("hide"))
$(this).text("Show less");
pre.removeClass('hide')
else
$(this).text("Show more");
pre.addClass('hide')
evt.preventDefault();
);
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
div.hide
display: none;
ul
padding-left: 45px;
li
padding-bottom: .4em;
p,
a
padding-bottom: .4em;
padding-left: 25px;
a,
a:focus,
a:hover
color: blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
answered Mar 28 at 8:00
prasanthprasanth
15.2k2 gold badges15 silver badges39 bronze badges
15.2k2 gold badges15 silver badges39 bronze badges
add a comment |
add a comment |
0
See this solution
- Just added a data attribute to the anchor tag
- added same value as a class to content
- than simple toggle with that data attribute
posted in jsFiddle https://jsfiddle.net/95gjd3ew/5/
$("#jdom a").click(function(e)
e.preventDefault();
if($(this).data("expand"))
var cls = $(this).data("expand");
$("."+cls).toggle();
if($(this).text()=="Show more")
$(this).html("Show less");
else
$(this).html("Show more");
);
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
add a comment |
0
See this solution
- Just added a data attribute to the anchor tag
- added same value as a class to content
- than simple toggle with that data attribute
posted in jsFiddle https://jsfiddle.net/95gjd3ew/5/
$("#jdom a").click(function(e)
e.preventDefault();
if($(this).data("expand"))
var cls = $(this).data("expand");
$("."+cls).toggle();
if($(this).text()=="Show more")
$(this).html("Show less");
else
$(this).html("Show more");
);
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
add a comment |
0
0
0
See this solution
- Just added a data attribute to the anchor tag
- added same value as a class to content
- than simple toggle with that data attribute
posted in jsFiddle https://jsfiddle.net/95gjd3ew/5/
$("#jdom a").click(function(e)
e.preventDefault();
if($(this).data("expand"))
var cls = $(this).data("expand");
$("."+cls).toggle();
if($(this).text()=="Show more")
$(this).html("Show less");
else
$(this).html("Show more");
);
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
See this solution
- Just added a data attribute to the anchor tag
- added same value as a class to content
- than simple toggle with that data attribute
posted in jsFiddle https://jsfiddle.net/95gjd3ew/5/
$("#jdom a").click(function(e)
e.preventDefault();
if($(this).data("expand"))
var cls = $(this).data("expand");
$("."+cls).toggle();
if($(this).text()=="Show more")
$(this).html("Show less");
else
$(this).html("Show more");
);
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
answered Mar 28 at 8:00
Dhanu KDhanu K
1,4381 gold badge10 silver badges24 bronze badges
1,4381 gold badge10 silver badges24 bronze badges
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.
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%2f55392394%2fchanging-text-back-and-forth-during-div-event%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
2
Could you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example
– Rayon
Mar 28 at 7:43
share your html snippet
– Dood
Mar 28 at 7:46
Added live demo
– speeddemon0
Mar 28 at 7:53