read more option

[Ingo Steinke]

How should this be styled and behave? Best practice UI UX?

Text should not be "read more" but more specific!

https://www.nngroup.com/articles/learn-more-links/

[Ingo Steinke]

UI draft: shortened list:
◆ Kostenloses Vorgespräch
◆ gezielte Auswahl an passenden Ergänzungen
◆ Zeit- und Nerven sparendes Einkaufen
⌄ mehr ...

---

Code draft:

• (optional) admin settings
  • feature flag setting to enable list shortening
  • setting for minimal number of list items
  • setting for custom buton text
• parse UL list DOM fragment string using PHP
• add button and classes
• base state (no-js, print):
  • all list items are visible, read-more button is invisible
  • CSS classes are ready for enhanced read-more state:
• progressive enhancement:
  • JS adds class name(s) to show button and hide subsequent list items initially
  • JS adds button event handler that removes class name to switch to all-visible state

---

admin setting draft:

[ ] Liste mit mehr als 4 Listenpunkten kürzen (inital 3 sichtbar + Link "mehr anzeigen..." um den Rest auszuklappen)
optional: abweichende Beschriftung statt "mehr anzeigen"/"show more":

---

existing HTML markup:

        <ul class="offers__offer__features__list"><li>
        Kostenloses Vorgespräch</li>
 	Virtuelle Beratung via Videoanruf</li>
 	Beratung zu Farbe und Schnitt der Kleidungsstücke</li>
 	Hilfe bei Kaufentscheidungen von online gekauften Kleidungsstücken</li>
        </ul>

experimental code snippets:

    if ($get_option('show_more') && list.matches(/<li>?/).length > 3) {
        $listItems = split('<li>', $list);
        $listExcerpt = join ('<li>', $listItems[0], $listItems[1], $listItems[2]);
        $listMore = join ('<li class="offers__offer__features__list__more">', array_slice( $listItems, 3 ));
        echo $listExcerpt . <<<EOF
<li class="offers__offer__features__list__readmore">
  <a href="#offerId-list-more">_e('mehr lesen', KLEIDERORDNUNG)</a></li>

obsolete CSS code draft, discarded as overengineered, fragile, unmaintainable:

  .offers__offer__features__list__readmore::marker { svg(caret-down) }
  .offer-list-more + li,
  .offer-list-more:target ~ li ~ .offer-list-more
   { display: none }
  .offer-list-more:target, 
  .offer-list-more:target ~ li,
  .offers__offer__features__list__readmore a.opened ~ li,
  .offers__offer__features__list__readmore a:active ~ li { visible }
  
  ^ ganz ohne JS wirkt reichlich overeingineered

more minimal CSS approach

  .offers__offer__features__list__readmore::marker { svg(caret-down) }
   .offers__offer__features__list__readmore { display: none; }
   .offers__offer__features__list__readmore.visible { display: initial; }
   .offers__offer__features__list__more.hidden { display: none; }

[Ingo Steinke]

ready for review and integration test on stage