Foldable Sitemap - TYPO3

gistfile1.txt

# CSS includes
page.includeCSS.sitemap = fileadmin/templates/css/sitemap.css

# tt_content
# sitemap
tt_content {
	# Sitemap
	menu.20.2 {
		stdWrap.wrap = <div id="sitemap-toggleAll"><p><a href="#" class="opened" style="display:none;">Alle <span class="opened">auf</span><span class="closed">zu</span>klappen</a></p></div>
		wrap = <div class="block-sitemap">|</div>
	}
}



# JS libraries include
page.includeJSlibs {
	# any jquery needed
	# jquery = fileadmin/templates/js/libs/jquery-1.11.1.min.js
}


# JS includes
page.includeJS {
	sitemap = fileadmin/templates/js/sitemap/sitemap.js
}

sitemap.css

/* Sitemap */
.block-sitemap {
	padding-bottom: 20px;
}

.block-sitemap h2 {
	font: 24px/26px Arial, Helvetica, sans-serif;
	margin: 0 0 12px;
}

.block-sitemap ul {
	overflow: hidden;
	list-style: none;
	font-size: 13px;
	line-height: 15px;
	margin: 0;
	padding: 0;
}

.block-sitemap ul li {
	float: left;
	clear: both;
	padding: 0 0 7px;
}

.block-sitemap ul li a {
	float: left;
	background: url(https://dl.dropboxusercontent.com/u/59204333/GIST/sitemap/bg-link2.gif) no-repeat 0 3px;
	padding: 0 0 0 15px;
	font-family: Arial, Helvetica, sans-serif;
}

.block-sitemap ul li .closed {
	background: url(https://dl.dropboxusercontent.com/u/59204333/GIST/sitemap/plus.gif) no-repeat 0 3px;
}

.block-sitemap ul li .opened {
	background: url(https://dl.dropboxusercontent.com/u/59204333/GIST/sitemap/minus.gif) no-repeat 0 3px;
}

.block-sitemap ul ul {
	clear: both;
	padding: 7px 0 0 16px;
}

.block-sitemap ul ul ul {
	position: relative;
	white-space: nowrap;
	margin: 0 0 -14px;
	padding: 7px 0 0 19px !important;
}

.block-sitemap ul {
	margin-bottom: 0;
	padding: 0;
}

.block-sitemap ul li a {
	background: none;
	padding-left: 0;
}

.block-sitemap a.folder, .block-sitemap a.page {
	width: 10px;
	text-indent: -9999px;
	display: block;
	background: url(https://dl.dropboxusercontent.com/u/59204333/GIST/sitemap/bg-link2.gif) no-repeat;
	margin-right: 5px;
	background-position: 0 3px;
	float: left;
}

#sitemap-toggleAll {
	margin-bottom: 8px;
}

.block-sitemap ul li {
	margin-bottom: 4px;
	padding: 0;
	list-style-type: none;
}

.block-sitemap ul ul {
	padding-top: 6px;
}

.block-sitemap ul ul ul {
	position: relative;
	white-space: nowrap;
	margin: 0;
	padding: 7px 0 0 19px !important;
}

#sitemap-toggleAll a {
	display: inline-block;
	float: none;
	height: 18px;
	font-family: Arial, Helvetica, sans-serif;
}

sitemap.js

// Define css blocks for toggle and sitemap list
var container = '.block-sitemap';
var toggleAll = '#sitemap-toggleAll a';

jQuery(document).ready(function() {
    // Hide level 2+
    jQuery(container+' ul li ul li>ul').css({
        display:'none'
    });

    // Handle open/close functionality
    jQuery(container+' ul li').each(function() {
        if(jQuery('ul', this).length > 0 ){
            //block added for support of partially opened tree
            if(jQuery(this).find('ul').css('display') == 'none') {
                jQuery(this).prepend('<a href="#" class="folder closed">auf</a>');
            }else {
                jQuery(this).prepend('<a href="#" class="folder opened">zu </a>');
            }
            //regular click binding
            jQuery(this).find('.folder').click(function() {
                if(jQuery(this).is('.closed')) {
                    //Submenü aufklappen
                    jQuery(this).text('zu ').removeClass('closed').addClass('open').parents('li').find('>ul').slideDown();
                }
                else {
                    //Submenü zuklappen
                    jQuery(this).text('auf').removeClass('opened').addClass('close').parent('li').find('>ul').slideUp();
                }
                return false;
            });
        }
        else {
            jQuery(this).prepend('<a href="#" class="page">seite</a>').find('.page').click(function() {
                window.location = jQuery(this).next().attr('href');
            });
        }
    });

    // Handle toggle function
    jQuery(toggleAll).show().find('span.closed').hide().end().click(function() {
        if(jQuery(this).is('.opened')) {
            jQuery(container+' ul li a.folder').removeClass('closed').addClass('opened');
            jQuery(container+' ul li ul').show();
            jQuery(this)
					.removeClass('opened')
					.addClass('closed')
					.find('span.opened').css('display','none').end()
					.find('span.closed').css('display','inline');
        }
        else {
            jQuery(container+' ul li a.folder').removeClass('opened').addClass('closed');
            jQuery(container+' ul li ul').hide();
            jQuery(this)
					.removeClass('closed')
					.addClass('opened')
					.find('span.closed').css('display','none').end()
					.find('span.opened').css('display','inline');
        }
        return false;
    });
});