Link 1
  • All geek questions in one place

    Go to snapping when overflowing

    <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 choosing a larger amount, I want to show 4-6. No need to do smooth scrolling. Found a couple of similar examples in stackoverflow, but they did not use a link outside ul like this. Interestingly, the easiest option. In addition, as a bonus, he will love less buttons, which will cancel more. For example, if he has advanced to show the next three clicks less, will 3 return?

    If necessary, you can use jquery. I would like to keep it as simply positive. Thanks for any ideas, I will continue to research at the same time.

    +5
    source share
    2 answers

    I'm not sure I'm right, but if you want to change the visible content of #the-list (show the next 3 elements and hide the previous 3), then there will be a solution: https://jsfiddle.net/hzonoyg0/

    +2
    source

    I tried to solve this problem by changing the css value. I tested it in JsFiddle, but it does not start in the "Run Code Snippet" stackoverflow.

     var ydelta = 60; window.more = function () { var list = document.getElementById("the-list"); list.style.height = '' + (parseInt(list.style.height) + ydelta) + 'px'; }; window.less = function () { var list = document.getElementById("the-list"); list.style.height = '' + (parseInt(list.style.height) - ydelta) + 'px'; }; 
     <ul id="the-list" style="overflow:hidden;height:60px;"> <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="javascript:more();">more</a> <a href="javascript:less();">less</a>
    0
    source

    Source: https://habr.com/ru/post/1271798/

    More articles:


    All Articles