<?php
/*
Plugin Name: Page children
Description: Provides [b3317133_children] shortcode
Version: 0.2
Author: b3317133
*/
function b3317133_children_init() {
    function b3317133_children_func( $atts, $content = null ) {
        $output = '';
        $navi = array();
        global $post;
        $args = array(
            'posts_per_page' => -1,
            'post_type' => $post->post_type,
            'post_status' => 'publish',     // 'draft' fuer Entwurf Status
            'post_parent' => $post->ID,
            'orderby' => 'title',
            'order' => 'ASC'
        );
        $posts = get_posts( $args );
        foreach( $posts as $post ) {
            setup_postdata( $post );
            // for navigation
            $navi[] = get_the_title();
            // use buffer to get content including the_content filters & wptexturize
            ob_start();
?>
<h1 id="<?php echo esc_attr( get_the_title() ); ?>"><?php the_title(); ?></h1>
<?php the_content(); ?>
<hr class="b3317133-up" />
<?php
            $output .= ob_get_clean();
        }
        wp_reset_postdata();
        // build navigation
        array_walk( $navi, function( &$n ) {
            $n = '<a href="#' . esc_attr( $n ) . '">' . $n . '</a>';
        });
        // add navigation
        $output = '<p id="b3317133-nav">' . implode( ' ', $navi ) . '</p><hr />' . $output;
        return $output;
    }
    add_shortcode( 'b3317133_children', 'b3317133_children_func' );
}
add_action('init', 'b3317133_children_init');

function b3317133_children_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'b3317133_children_enqueue_scripts' );

function b3317133_children_wp_head() {
?>
<style type="text/css">
#b3317133-nav a {
    padding-right: 5px; /* distance after each navi */
}
hr.b3317133-up {
    position: relative;
}
hr.b3317133-up::after {
    position: absolute;
    right: 0;
    top: -10px;
    content: '^';
    font-size: 18px;
    background-color: #fff;
    cursor: pointer;
    padding-left: 5px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(document).on('click', 'hr.b3317133-up', function(event) {
        event.preventDefault();
        //location.hash = '#b3317133-nav';
        jQuery('html, body').animate({
            'scrollTop': jQuery('#b3317133-nav').offset().top - 18
        }, 200);
    });
});
</script>
<?php
}
add_action('wp_head', 'b3317133_children_wp_head', 999);