Був прикручений плагін Collapsing Pages. Але скрипт трохи криво працював. Ну розбиратися було лінь, то я і навайв свій
jQuery(document).ready(function($){
// Селектор віджета
var box = '.box';
var expandedNode = '–';
var collapsedNode = '+';
var emptyNode = ' '
$(".box")
//Шукаємо всі посиланння на сторінку, які не мають вкладень...
.find("li.page_item:not(:has(ul))")
.each(function(){
$(this)
.children(":first")
//... і перед першим потомком вставляємо знак порожньої гілки
.before("" + emptyNode + "")
});
$(".box")
//Шукаємо всі посиланння на сторінку, які не є батькіськими до посилання на поточну сторінку, не є поточною сторінкою, і мають вкладення...
.find("li.page_item:not(.current_page_ancestor,.current_page_item):has(ul)")
.each(function(){
$(this)
.children(":first")
//... і позначаємо їх знаком згорнутої гілки.
.before("")
});
$(".box")
//Шукаємо всі посиланння на сторінку, які є батькіськими до посилання на поточну сторінку або є поточною сторінкою, і мають вкладення...
.find("li.page_item.current_page_ancestor,li.page_item.current_page_item:has(ul)")
.each(function(){
$(this)
.children(":first")
//... і позначаємо їх знаком розгорнуої гілки.
.before("")
});
$(".box")
//Шукаємо всі посиланння на сторінку, які не є батькіськими до посилання на поточну сторінку, не є поточною сторінкою...
.find("li.page_item:not(.current_page_ancestor, .current_page_item) ul")
//... і робимо всі вкладення згорнутими.
.addClass("page_item_hidden");
$(".box")
.find(".toggleExpand.expandeble")
//Реагуємо на клацання по знаку гілки
.click(function(event){
//Припиняємо виринання бабл-евентів.
event.stopPropagation();
//Якщо данна гілка виявилася згорнутою ...
if ($(this).text()==collapsedNode)
{
//... позначаємо її знаком розгорнутої гілки ...
$(this).parent().children(".toggleExpand.expandeble").html(expandedNode);
//... і розгортаємо ПЕРШЕ вкладення.
$(this).parent().children("ul").removeClass("page_item_hidden");
}
else //Інакше
{
//... позначаємо її знаком згорнутої гілки ..
$(this).parent().find(".toggleExpand.expandeble").html(collapsedNode);
//... і згортаємо ВСІ вкладення.
$(this).parent().find("ul").addClass("page_item_hidden")
}
})
});
І до цього всього діла простенький цсс
.page_item{
list-style-type:none!important;
}
.current_page_item>a{
font-weight:bold;
}
.page_item_hidden{
display:none;
}
span.toggleExpand{
cursor:default;
padding-right:2px;
}
span.toggleExpand.expandeble{
cursor:pointer;
}
