User:Erutuon/der3

der3 with classes applied to list items

 * beer and skittles
 * beer belly
 * beer-bust
 * beer and skittles
 * beer belly
 * beer-bust
 * beer can
 * beered-up
 * beer garden
 * beer goggles
 * beer gut
 * beer hall
 * beerily
 * beerish
 * beerless
 * beer mat
 * beer muscles
 * beer o'clock
 * beer parlour
 * beerstone
 * beery
 * bock beer
 * champagne taste on a beer budget
 * craft beer
 * <li class="vsHide">cry in one's beer
 * <li class="vsHide">ginger beer
 * <li class="vsHide">keg beer
 * <li class="vsHide">ice beer
 * <li class="vsHide">near beer
 * <li class="vsHide">root beer

List switcher
To try this, add  to your common.js.

<div class="term-list" data-column-count="3" style="column-count: 3; -moz-column-count: 3; -webkit-column-count: 3;"> <span class="list-switcher-element" style="display: inline-block;" data-showtext=" show more ▼ " data-hidetext=" show less ▲ ">
 * beer and skittles
 * beer belly
 * beer-bust
 * beer and skittles
 * beer belly
 * beer-bust
 * beer can
 * beered-up
 * beer garden
 * beer goggles
 * beer gut
 * beer hall
 * beerily
 * beerish
 * beerless
 * beer mat
 * beer muscles
 * beer o'clock
 * beer parlour
 * beerstone
 * beery
 * bock beer
 * champagne taste on a beer budget
 * craft beer
 * cry in one's beer
 * ginger beer
 * keg beer
 * ice beer
 * near beer
 * root beer

Implementations
Terminology: shown state is state resulting from clicking "more" button, hidden state is state resulting from clicking "less" button.
 * 1) two separate lists, one in shown state, one in hidden state (link)
 * 2) * cons: duplicates list items
 * 3) classes on individual list items in page source (link)
 * 4) * pros:
 * 5) *# doesn't require list items to be duplicated in two separate lists (one for shown state, one for hidden state); this is also true of several other implementations
 * 6) *# doesn't require setting any classes on individual list items initially (though this feature can be added to some of the other implementations)
 * 7) * cons: have to add class in module; can't customize number of items in shown state as neatly
 * 8) "list switcher": have JavaScript show a certain number of items from beginning of list in hidden state (link)
 * 9) * cons: list items change position between shown and hidden state
 * 10) Victar Example #2 (link): ??
 * 11) attempt to calculate height of each row of the list and have an element cut off a certain number of rows (link)
 * 12) * impossible to reliably get the height because it depends on the details of text rendering
 * 13) use math to figure out which items will be in each column and add   class to all but the first certain number of rows so they will be hidden (link)
 * 14) * pros: if math works, list items don't change position between shown and hidden state
 * 15) * cons: the math isn't always correct