Navs Target Section Pure CSS

Step Wizad Process Next And Previous With Pure CSS Without jQuery

<div class="panel panel-default">
    <nav class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
            <li><a href="#c1">Link 1</a></li>
            <li><a href="#c2">Link 2</a></li>
            <li><a href="#c3">Link 3</a></li>
        </ul>
    </nav>
    <div class="panel-body">
        <section id="c1">This is chapter #1. <a href="#c2" class="btn btn-primary">Next chapter</a>
        </section>
        <section id="c2">This is chapter #2. <a href="#c3" class="btn btn-primary">Next chapter</a>, <a href="#c1" class="btn btn-success">Previous chapter</a>
        </section>
        <section id="c3">This is chapter #3. <a href="#c2" class="btn btn-success">previous chapter</a>
        </section>
    </div>
</div>

section[id]:not(:target) {display: none;}

DEMO