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

I'm using CSS and HTML to show/hide a few divs. (http://jsfiddle.net/davidThomas/x8HmQ/2/)

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?

#content > div {
  display: none;
  width: 50%;
  margin: 0 auto;
}
#content > div:target {
  display: block;
}
#content > div a.hide {
  display: block;
  text-align: right;
}

<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>

Solution

ul{
text-align: center;
padding: 0;
margin: 0 auto 20px;
}
li{
display: inline-block;
border: 1px solid green;
padding: 10px;
}
#content{
position: relative;
max-width: 80%;
margin: 0 auto;
}
.prev, .next, .dummy-right, .dummy-left{
box-sizing: border-box;
border: 1px solid blue;
padding: 10px;
position: absolute;
top: 0;
height: 40px;
width: 30px;
}
.prev, .dummy-left{
left: -30px;
}
.next, .dummy-right{
right: -30px;
}
.dummy-right, .dummy-left{
background: #fff;
border-color: #fff;
}
#content > div {
  display: none;
  width: 50%;
  margin: 0 auto;
padding: 20px;
border: 1px solid red;
}
#content > div:target {
  display: block;
}
#content > div a.hide {
  display: block;
  text-align: right;
}

<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">

<a href="#div2" class="next">&gt;</a>        
  <div id="div1">
  This is div one

<a href="#div2" class="next">&gt;</a>  
<span class="dummy-left"></span>
</div>
  <div id="div2">This is div two

<a href="#div1" class="prev">&lt;</a>  
<a href="#div3" class="next">&gt;</a>  
</div>
  <div id="div3">This is div three
<a href="#div2" class="prev">&lt;</a>  
<a href="#div4" class="next">&gt;</a>  
</div>
  <div id="div4">This is div four

<a href="#div3" class="prev">&lt;</a>  
<span class="dummy-right"></span>
</div>
</div>