I need to combine the two functionalities used here:
#1) [url removed, login to view]
#2) [url removed, login to view]
The goal is to use the animation code from page #1 and place it in page #2.
Note that the JSON data that is being loaded in #2 is just sample data. In reality, this JSON feed will have a variable number of items. In the current example, the JSON feed always has 3 new items. In reality, it could have more or less. This means that the JSON will have to be loaded first, then the length of the JSON will be determined, then that number will be used to remove the elements at the end of the <ul> list, and finally the new <li> elements will be prepended to the <ul>.
The max number of visible items should be definable via a variable (for example, 20 max). The max number of items (visible or hidden) should be definable via another variable. At the bottom of the container should be a "See more" link that changes the number of visible items by increasing it by another variable.
So for example,
Clicking "see more" increases maxvisible to 30 and reveals the 10 posts the very most recently hidden.