2

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.

My question is:

I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.

Can this be done with CSS only, without any javascript?

Since some users block javascript, that's why I was looking for a way around...

Thanks a lot.

fana it
  • 53
  • 2
  • 11

3 Answers3

3

actually @Vaidya & @Preet it is possible via css only :

https://css-tricks.com/swapping-out-text-five-different-ways/

@fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.

I can see that using css to replace content is strongly discouraged within the stackoverflow community. However I haven't found another cause other then that of code cleanliness.

I really think in coming years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.

tatsu
  • 2,316
  • 7
  • 43
  • 87
  • 1
    txs a lot @tatsu. Since JS is often blocked by users, then css becomes an option. Why is the community not supporting it? – fana it Mar 23 '18 at 06:58
  • care to upvote and mark me as answer? I think it's a question of specializing everything. If you do and use everything in their specialized manner then theoretically you're getting the best possible performance, security, code cleanliness and everything. It does work out that way most of the time and admittedly one could assess Css is not meant for this. I personally think just like, java, python and javascript have surprised before with untapped performance, css is also capable of a new birth. People need to stop taking a language's performance at face value and assume it can't get better. – tatsu Mar 23 '18 at 09:13
  • txs @tatsu . Appreciated. – fana it Mar 23 '18 at 12:28
1

It can't be done through CSS You must need to add a script for an on-click event.

Anand Vaidya
  • 609
  • 2
  • 16
  • 41
  • Hi Vaidya. Yes, that's what I thought initially... but it seems there could be some ways to overcome it through css... I'm also checking this article here: https://tympanus.net/codrops/2012/12/17/css-click-events/ – fana it Sep 04 '17 at 12:37
  • worse yet you can actually programmatically LISTEN to the emited css events. it's still a bit iffy but by refinement I managed, for example, to convert a css hover (and it subsequent unhover event) into an Angular 5 Observable complete with the css's own animation delay in and delay out. – tatsu Mar 19 '18 at 15:33
  • The answer I have given by considering that there is plan HTML and he dont needs any Js part. If you are adding angular in it. I consider it is also a part of js. If you have any alternative which answer to question without having Js and have plan html I will modify/ delete my post. – Anand Vaidya Mar 20 '18 at 05:29
  • txs a lot @vaidya – fana it Mar 23 '18 at 06:59
  • However, the solution provided by @tatsu is partially correct – Anand Vaidya Mar 23 '18 at 11:42
1

I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)

If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:

 #example {
      position: relative;
    }
    #example-checkbox {
      display: none;
    }
    #example-checkbox:checked + #example:after {
      content: "Hide";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
    }
 <input id="example-checkbox" type="checkbox">
    <label for="example-checkbox" id="example">Show</label>

Reference See css only part.

Hope it will help you.

Preet
  • 984
  • 2
  • 14
  • 34
  • Txs Preet. I guess that your way could be the way... yet, I need a way to change the text into a different text... (as a translated version of my site).... – fana it Sep 04 '17 at 12:36