I have a ul with 5 li i and two other li in both side pre and next i wanna do as below

Question

with clicking on pre show the three first li and clicking next show three last li with mootools and nice animation.Can someone help me?

<ul class="test">
<li><a href='' class="prev">pre</a></li>
<li class="test1">test1</li>
<li class="test2">test2</li>
<li class="test3">test3</li>
<li class="test4">test4</li>
<li class="test5">test5</li>
<li><a>next</a></li>
</ul>

http://jsfiddle.net/vtoedop7/17/

Answer 1

Heres a JSFiddle I made with a simple fade in animation. The javascript code finds the elements not marked active and activates them. This is sufficient for a small list that only has 2 pages. It would need to be adjusted to work with more pages but I wasn't sure from your specifications if thats what you want. https://jsfiddle.net/aj7x38th/

html:<ul class="tests">
    <li><a onclick="change()" class="prev">pre</a></li>
    <li class="test active">test1</li>
    <li class="test active">test2</li>
    <li class="test active">test3</li>
    <li class="test">test4</li>
    <li class="test">test5</li>
    <li class="test">test6</li>
    <li><a onclick="change()" class='next'>next</a></li>

</ul>   

Javascript:

function change() {
    var tests = document.getElementsByClassName('test');
    var numberOfTestsActive = 0;
    [].forEach.call(tests, function(currentTest) {
        if(currentTest.classList.contains('active')) {
            currentTest.classList.remove('active');
        } else {
            currentTest.classList.add('active');
        }
    });
}

CSS:

.tests li {
    float:left;
    padding-right:20px;
    list-style: none;
}
.test {
    display: none;
}
.active {
    display: inline;
    animation: test-fade-in 1s forwards;
}
.next, .prev {
    text-decoration: underline;
    color: purple;
    cursor: pointer;
}

@keyframes test-fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}