jQueryでhideの逆は？

jQueryライブラリでは、ウェブページ上のHTML要素の表示・非表示を簡単に操作するためのメソッドが提供されています。その中でも「非表示」にするためのメソッドはhide()ですが、逆に「表示」するためのメソッドを知っていますか？答えはshow()です。

「show()」でHTML要素を表示する方法

hide()が要素を非表示にするメソッドなのに対して、show()は要素を表示することができます。このメソッドを使えば、display: none;で非表示になっている要素を再び表示することができます。次に簡単な使用例を紹介します。

使用例

以下にshow()メソッドを用いた簡単な例を示します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery Show Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#showButton").click(function(){
                $("#myDiv").show();
            });
        });
    </script>
</head>
<body>
    <div id="myDiv" style="display:none;">このテキストは最初は非表示です。</div>
    <button id="showButton">表示</button>
</body>
</html>

上記のコードでは、ボタンをクリックするとdiv要素が表示されるようになります。これはshow()メソッドを使用することで、簡単に実現可能です。

参考文献

jQueryの公式ドキュメントでも、show()メソッドについて詳細に説明されています。より深く知りたい方は以下のリンクを参考にしてください。

jQuery API Documentation - show()

その他の参考記事:jquery show slow