1

I am trying to create an accordion link (that expands the accordion)

I would like the text change depending on whether the link is active or not.. for example:

DEFAULT : "View all Comments"
ACTIVE : "Hide Comments"

I know I can use CSS to style the content colours, style, etc., but wondering if there is a way I can change the actual text in the link that is dependent on the link being active or not.

Hannah
  • 91
  • 1
  • 1
  • 4
  • With pure css you can make the text to be a pseudo-element(`:before` or `:after`) and use the `content: 'View all Comments'` and change it on active. Else you can do it with javascript. – Joel Almeida Aug 07 '15 at 07:33
  • E.g. http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css – Roope Aug 07 '15 at 07:34
  • 4
    Although you could use the `content` property in combination with `:before` or `:after` selector, but **I don't recommend to do this in CSS** - use JavaScript instead. – Fabio Poloni Aug 07 '15 at 07:37

2 Answers2

1

.accordion-item::before { /* default text of the accordion item */
  content : "View all comment";
}

.accordion-item:focus:before { /* triggered when the accordion item is clicked/focused */
  content : "Hide Comments";
}
<a href="#" class="accordion-item"></a>

Here is a sample of how to do this, assuming you will have several link that stands for each accordion items.

Note that you could have used the new HTML data-* attribute to kind of automatize the process in case you are generating the HTML before being interpreted through language such as Php or JavaScript like following :

Anwar
  • 4,162
  • 4
  • 41
  • 62
-1

You can use pseudo element like this

<a class="toggleText"></a>

CSS:

.toggleText::after
{
    content:"View all Comments";
}
.toggleText:active::after
{
    content:"Hide Comments";
}

psuedo elements might not supported on old browsers you wish you want to support.

check support here:http://caniuse.com/#search=%3A%3Aafter

and for content : http://caniuse.com/#search=CSS%20Generated%20content%20for%20pseudo-elements

VMcreator
  • 833
  • 8
  • 17
  • Bad idea to put human-readable strings in `:before` and `:after` elements. –  Aug 07 '15 at 08:50
  • @torazaburo can you explain why? – VMcreator Aug 07 '15 at 08:53
  • For one thing, it's not very localizable. More basically, it makes it harder to manage the UI--strings now have to be managed in two different places. Ideally, `content` is used for things like icons, spaces and the like. –  Aug 07 '15 at 09:32
  • Well i see your point, but it still depends on the developer on how he will organize his/her work. There is no such rule that says if you're doing uncommon things even if its working, it will still be wrong. – VMcreator Aug 07 '15 at 09:38
  • It is generally not considered best practice, as someone else already mentioned in a comment on the question. It's uncommon because it's not best practice. –  Aug 07 '15 at 09:42
  • Yes, for now. But if you want to be innovative, you create your own rules, don't just follow someone, especially programming languages evolves. – VMcreator Aug 07 '15 at 09:44
  • It's not innovative. It's bad practice. –  Aug 07 '15 at 09:46
  • well that's your opinion, I'm certain that there's no perfect answer for that. like what I've said it depends on developer on how he organize his things, as long as the code doesn't slow the application, doesn't cause a problem then its correct. – VMcreator Aug 07 '15 at 09:52
  • No, it's not my opinion. It's the consensus of experts. –  Aug 07 '15 at 10:36