Replace multiple words with jQuery

Hi all,
I generally post half baked jquery snippets along with my questions but this time, I’m stumped from the get go - not being lazy here ;). So help me out.

What I’m trying to do is create a feature for a web page where there is an article. In that article, there would be multiple words across the article within a span element <span class="temporary">temporary words</span><span class="real-words">the real words</span>.

By default, the class “temporary” should display with “real-words” hidden.
There will be a checkbox that says “Show me the real words”. When a user checks that box, ALL the <span> elements with the class “temporary” should be hidden and now the <span> elements with the class “real-words” should display.

I know the answer lies on this page http://api.jquery.com/replacewith/ or close enough… any pointers would help.

Thanks!

You’re already giving the span elements a class, so you could just display:none; the ‘real-words’ class upon page load, then set up a function that will display:none; the ‘temporary’ class elements, and display:inline; the ‘real-words’ class.

HTH,

:slight_smile:

1 Like

doh!

LMK how it worked out. :smile:

:slight_smile:

Sounds like a situation where you get lost in the forest because a tree is right in front of you. Ha. Been there MANY times. :smile:

1 Like

Agree with @WolfShade. That would be a quick resolution.

Not sure, if you have used jQuery .toggleClass API to achieve the same. First you put a class like “content-hidden” on span tags then click event on checkbox will toggle this class and things will be visible on page.

$('.show-real-words').on('click', function() {
     $('span', '.container-class').toggleClass('content-hidden');
});

Would be really helpful if you create a example scenario either on js fiddle http://jsfiddle.net or code pen http://codepen.io

Best
~ LY

1 Like

I didn’t even think about toggleClass… would be less code, more efficient. +1

:slight_smile:

Thanks… I think I mangled some jQuery. I’ll share a link soon. I have more questions after cobbling those few lines together.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.