Как добавить опцию [скрыть] и [показать] рядом с заголовком оглавления?

Я использовал следующий код, чтобы сделать оглавление в своем блоге на WP.

Добавил этот код CSS в пользовательский файл CSS:

 #toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;}

.toc_title {
    font-weight: 700;
    text-align: center;}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;}

и HTML-код, который я использовал для этого:

<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1 First Point Header</a>
  <ul>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
  </ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

Теперь, как я могу добавить параметр [скрыть] и [показать] рядом с содержанием (заголовок) так же, как они делают это в оглавлении Википедии? Ответы приветствуются.

Источник

1 ответ

Не слишком сложно:)

Попробуй это:

<html>
<head>
    ...HEAD Stuff...
    <script>
    var hideTOC = function(){
        var hideThese = document.getElementsByClassName("toc_list");
        for (var i = 0; i < hideThese.length; i++){
            hideThese[i].style.display = "none";
        }
        document.getElementById("showTOC").style.display = "";
    }
    var showTOC = function(){
        var showThese = document.getElementsByClassName("toc_list");
        for (var i = 0; i < showThese.length; i++){
            showThese[i].style.display = "";
        }
        document.getElementById("showTOC").style.display = "none";
    }
    </script>
</head>
<body>
    ...BODY Stuff...
    <div id="toc_container">
        <p class="toc_title">Contents [<a href='javascript:void(null)' class='toc_list' onclick='hideTOC()'>hide</a><a href='javascript:void(null)' id='showTOC' style="display:none;" onclick='showTOC()'>show</a>]</p>
        <ul class="toc_list">
            <li><a href="#First_Point_Header">1 First Point Header</a>
                <ul>
                    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
                    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
                </ul>
            </li>
            <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
            <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        </ul>
    </div>
    ...BODY Stuff...
</body>
</html>
Источник
Другие вопросы по тегам