リストを「表示」して、ボタンをクリックしてリストを「非表示」するにはどうすればいいですか？

Question

これは私がこれまでHTMLとjqueryの面で持っていたものです...完璧な世界では、 'ボタン'がクリックされると、 'list'は最初から隠されていました。 「隠す」ボタンがクリックされると、リストは元の状態に「隠れる」でしょう。

<ul class="list"> 
<li><a href="sleeping.html">Sleeping</a></li> 
<li>Running</li> 
<li>Playing with Pepper</li> 
<li>Swimming</li> 
<li>Lounging</li> 
</ul> 
<button>List</button> 

$("button").click(function() { 
if ($(".list").toggle().is(":visible")) { 
$("button").text("Show List"); 
} else { 
$("button").text("Hide List"); 
} 
}); 

Answer 1

$("button").click(function() { 
 
    if ($(".list").toggle().is(":hidden")) { 
 
    $("button").text("Show List"); 
 
    } else { 
 
    $("button").text("Hide List"); 
 
    } 
 
});

.list { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="list"> 
 
    <li><a href="sleeping.html">Sleeping</a> 
 
    </li> 
 
    <li>Running</li> 
 
    <li>Playing with Pepper</li> 
 
    <li>Swimming</li> 
 
    <li>Lounging</li> 
 
</ul> 
 
<button>Show List</button>

Answer 2

クラスを使用して、それを切り替える：

$("button").on('click', function() { 
    $(".list").toggleClass('hidden'); 
    if ($(".list.hidden").length) { 
    $(this).text("Show List"); 
    } else { 
    $(this).text("Hide List"); 
    } 
}).text("Show List"); 

CSS：

.hidden { 
    display: none; 
} 

HTML

<ul class="list hidden"> 
    <li><a href="sleeping.html">Sleeping</a></li> 
    <li>Running</li> 
    <li>Playing with Pepper</li> 
    <li>Swimming</li> 
    <li>Lounging</li> 
</ul> 
<button>List</button>