In my theme, I have to output a toggle link like this:

<a class="hl__link-tag hl__link-tag--with-arrow js-show-more-text-link" href="#" title="Click to show more / less text" aria-expanded="false" aria-controls="showMoreText{{ paragraph.id() }}"><span class="hl__link-tag__toggle-text">Show Less</span><span>Show More</span></a>

Its not a real field or anything like that. Is there a way I can use link or path functions to generate this output instead? I am guessing since the title has two spans in it that I cannot, but lets assume there were no spans, I'd like to know if this is possible.

I tried:

{{ link('Show More', 'internal:#') }}


{{ link('Show More', '#') }}

The first one creates an empty href, which does not work. The second throws a fatal error.

  • Why not using built-in Twig functions? Macros, include, embed,... should do the same – Hudri May 4 '18 at 12:55
  • You can't. You have to use preprocessor and inline template. – user21641 May 4 '18 at 13:01
  • If you really must use an a element better use href="javascript:void(0)". Related discussion: stackoverflow.com/q/134845/2199525 – leymannx May 4 '18 at 18:55
  • At best use <button>{{ 'Show more'|t }}</button>. – leymannx May 6 '18 at 8:52

You could just type it into the template and dont have to do anything clever or twig based? e.g.

<a href="#">Show more</a> 

The core html.html.twig quite happily does this for the #main-content link:


  • That is what I am already doing, I just don't like it very much. – Kevin May 4 '18 at 13:20
  • 2
    <a href="#">{{ 'Show more'|t }}</a> – leymannx May 4 '18 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.