Jump to anchor in overflow hidden

Question

<ul id="the-list" style="overflow:hidden;height:100px;>
    <li><a id="link1" href="#">Link 1</a></li>
    <li><a id="link2" href="#">Link 2</a></li>
    <li><a id="link3" href="#">Link 3</a></li>
    <li><a id="link4" href="#">Link 4</a></li>
    <li><a id="link5" href="#">Link 5</a></li>
    <li><a id="link6" href="#">Link 6</a></li>
    <li><a id="link7" href="#">Link 7</a></li>
    <li><a id="link8" href="#">Link 8</a></li>
    <li><a id="link8" href="#">Link 9</a></li>
<ul>
<a href="">more</a> <a href="">less</a>

The div above shows the first three links. When selecting more I want to to show 4-6. It doesn't need to do any smooth scrolling. Found a couple similar examples on stackoverflow but they didnt involve a link outside of the ul like this. Wondering what the simplest option is. Also as a bonus would love a less button that would undo the more. Such as if it advanced to show the next three clicking less would go back 3?

Can use jquery if necessary. Would like to keep it as simply as positive. Thank you for any ideas, I'll keep researching in the meantime.

Answer 1

I'm not sure that I got you right, but if you want to change visible content of #the-list (show next 3 items and hide previous 3), than here's a solution: https://jsfiddle.net/hzonoyg0/