Design a site like this with WordPress.com
Get started

Test Page

/* li { list-style-type: none; padding-left: 0em; } .main li, .toplinks li { margin-top: 10px; margin-bottom: 10px; list-style-position: inside; padding-left: 1em; } .main li, h2 { font-size: 26px; font-weight: 800; letter-spacing: 0.1em; /*list-style-type: none;*/ } .main ul { display: none; text-indent: -1em; } .main li li { list-style-type: disc; font-size: 22px; font-weight: 500; letter-spacing: 0.05em; } .main li li li { font-size: 18px; font-weight: 400; letter-spacing: normal; } .main li li li li { font-size: 16px; font-weight: normal; } .main .node { cursor: pointer; /*display: inline-block;*/ /* padding-left: 1.2em;*/ padding-right: 0px; margin-right: 0px; } .main .node:hover { color: #a33; /*text-decoration: underline;*/ } .main > li:nth-child(1) > .node {color: #ff4d4d;} .main > li:nth-child(2) > .node {color: #329c9c;} .main > li:nth-child(3) > .node {color: #575757;} .main > li:nth-child(4) > .node {color: #ffa04d;} .main > li:nth-child(5) > .node {color: #36b543;} .main > li:nth-child(6) > .node {color: #bda115;} .main > li:nth-child(7) > .node {color: #5079d9;} .main > li:nth-child(8) > .node {color: #a031d4;} .box { border: 1px solid #ddd; border-radius: 10px; /* border-top-left-radius: 0px; border-top-right-radius: 0px; */ margin: 10px; padding: 5px; padding-left: 15px; /*margin-top: 0px !important; padding-top: 0px !important;*/ background: #f8f8f8; } .pmbox { font-weight: normal !important; font-size: 16px; /* color: #999; */ opacity: 0.5; vertical-align: middle; line-height: normal !important; /* border: 1px solid #ddd; padding-left: 5px; padding-right: 5px; */ text-decoration: none !important; margin-left: 10px; letter-spacing: 0.15em; } .allbox { display: none; font-weight: normal !important; font-size: 16px; color: #000; opacity: 0.5; vertical-align: middle; line-height: normal !important; /* border: 1px solid #ddd; padding-left: 5px; padding-right: 5px; */ text-decoration: none !important; margin-left: 5px; letter-spacing: 0.15em; } .allbox:hover { opacity: 1.0; color: #c93; } .boxtop { text-decoration-style: underline; /* border: 1px solid #ddd; background: #f0f0f0; width: 90%; margin-bottom: 0px !important; padding-bottom: 0px !important; */ } /*]]>*/ https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js $(function () { $(“.main ul”).map(function () { var len = $(this).parents(‘li’).length; if (len == 3) { $(this).addClass(‘box’); } else if (len > 3) { $(this).show(0); return; } if ($(this).data(‘skip’)) return; var p = this.previousSibling; if (!p || p.nodeType != Node.TEXT_NODE) return; p.textContent = $.trim(p.textContent); $(p).wrap(‘‘); p = $(this).prev().append(‘[+]‘); if (len < 3) { if ($(this).find('ul').length) { var lilen = 1; var at = $(this); for (var i = len; i 1) { //$(this).children(‘li’).length p.append(‘[show all]‘); } else { $(this).find(‘ul’).show(0).data(‘skip’,true); } } } var ul = $(this); p.data(‘all_open’, false); p.find(‘.allbox’).on(‘click’,function (e) { var cfg = p.data(‘all_open’) ? [‘[show all]’, true] : [‘[close all]’, false]; p.data(‘all_open’, !cfg[1]); $(this).text(cfg[0]); ul.children().children(‘.node’).filter(function () { return $(this).data(‘open’) == cfg[1] }).map(function(){ $(this).click(); var x = $(this).children(‘.allbox’); if (x.length) { if ($(this).data(‘all_open’) == cfg[1]) x.click(); } }); return false; }); p.data(‘open’, false); var pmbox = p.find(‘.pmbox’); var allbox = p.find(‘.allbox’); p.on(‘click’,function () { var o = p.data(‘open’); if (o) { pmbox.text(‘[+]’); allbox.fadeOut(150); p.removeClass(‘boxtop’); ul.slideUp(250); } else { pmbox.text(‘[–]’); allbox.fadeIn(150); p.addClass(‘boxtop’); ul.slideDown(250); } p.data(‘open’, !o); //p.find(‘.pmbox’).map(function(){ // $(this).text($(this).text() == ‘[+]’ ? ‘[–]’ : ‘[+]’) //}); //p.toggleClass(‘boxtop’); //ul.slideToggle(); }) }); }); /*]]>*/