DIV show and hide with jumping to next when click on link

I'm using css & html to show/hide a few div's. (http://ift.tt/1eSrsuI)

I would like to extend this code with PREV and NEXT "buttons" which do exactly as is... So if DIV2 currently visible and hit the next button the jump to the DIV3...

Is it possible with CSS+HTML only?

<ul>
    <li><a href="#div1">Div one</a></li>
    <li><a href="#div2">Div two</a></li>
    <li><a href="#div3">Div three</a></li>
    <li><a href="#div4">Div four</a></li>
    <li><a href="#">hide</a></li>
</ul>

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

#content > div {
    display: none;
    width: 50%;
    margin: 0 auto;
}

#content > div:target {
    display: block;
}

#content > div a.hide {
    display: block;
    text-align: right;
}

via Chebli Mohamed