Hesoyam

Show More

Expand or collapse a long list or block. The trigger owns aria-expanded; you own the content.

Default

Controlled. Toggle expanded and render the hidden rows yourself.

  • main
  • feat/billing-invoices
  • feat/proxy-health
  • fix/session-cookie

        

          1
          
          <ul id="branches">
        

          2
          
            <li v-for="name in visible" :key="name">{{ name }}</li>
        

          3
          
          </ul>
        

          4
          
          <ShowMore
        

          5
          
            :expanded="expanded"
        

          6
          
            aria-controls="branches"
        

          7
          
            @click="expanded = !expanded"
        

          8
          
          />

Expanded

Pass expanded to flip the chevron and the default Show Less label.


        

          1
          
          <ShowMore :expanded="true" />

No border

Drop the hairline when the trigger sits on a card or already-divided stack.


        

          1
          
          <ShowMore no-border :expanded="expanded" @click="expanded = !expanded" />

Custom label

Slot the label. Title Case. Include the hidden count so the click has a cost.


        

          1
          
          <ShowMore :expanded="expanded" @click="expanded = !expanded">
        

          2
          
            {{ expanded ? 'Show Less' : `Show ${hiddenCount} More` }}
        

          3
          
          </ShowMore>

Best practices

  • Use Show More for one long list or block. Sibling pages of the same set belong on Pagination. Optional sections belong on Collapse.
  • Show 5–10 rows before truncating so the list still has a shape. Cutting at two rows makes the control feel decorative.
  • Put the hidden count in the label (Show 12 More), then Show Less after expand. Title Case both.
  • Do not collapse the same list after the user opened it in the middle of a flow. That jumps the scroll away from what they were reading.
  • Keep a small hidden set in the DOM so find-in-page works. Lazy-load only when the extra rows would hurt first paint.
  • The trigger is a button. Point aria-controls at the list. After expand, move focus to the first newly shown row.