HTML

<nav></nav>

CSS

nav {
    background: #f2f2f2;
    display: inline-block;
    padding: 5px 10px 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: right;
    margin: 0 0 20px 20px;
    font-size: 95%;
    max-width: 400px;
    border-top: 10px solid #d9d9d9;
}

nav h3 {
    text-align: left;
    margin-left: 10px;
}

nav a {
    box-shadow: none;
    padding: 5px 10px;
    margin: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
}

nav a:hover {
    background: #e6e6e6;
    padding: 5px 10px;
}

nav a.padding {
    padding-left: 20px
}

nav i {
    float: right;
    margin-left: 10px;
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    background: #f2f2f2;
}

nav i:hover {
    background: #fff;
}

.ion-arrow-down-b::before {
    content: "\f104";
}

.ion-arrow-up-b:before {
    content: "\f10d";
}

h2:target,
h3:target {
    animation: anim 3s;
}

@keyframes anim { 
    0%, 100% {
        background: rgba(0,0,0,0);
    }
    
    50% {
        background: #fff;
    }
}

Jquery

if ($("nav").length) {
    var navBlock = "<h3>Содержание<i class='ion-arrow-up-b'></h3>";
    var line, link, type, id;
    $("h2,h3").each(function(index) {
        type = $(this).context.localName;
        id = '_'+index;
        $(this).attr('id',id);
        link = window.location.pathname+"#"+id;
        if(type == 'h3') {
            line = "<a class='padding' href='"+link+"'>"+$(this).text()+"</a>";
        }
        else {
            line = "<a href='"+link+"'>"+$(this).text()+"</a>";
        }
        navBlock += line;
    });
    $("nav").prepend(navBlock);
}

$('nav i').click(function(){
    $(this).toggleClass('ion-arrow-up-b ion-arrow-down-b');
    $(this).parent().parent().find('a').toggle();
});