How can i make my sub-menu show and hide when click on main item? <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.slideout-menu li').click( function() { $(this).children('.mobile-sub-menu').show(); }, function() { $(this).children('.mobile-sub-menu').hide(); }); </code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.slideout-menu { position: absolute; top: 100px; left: 0px; width: 100%; height: 100%; background: rgb(248, 248, 248); z-index: 1; } .slideout-menu .slideout-menu-toggle { position: absolute; top: 12px; right: 10px; display: inline-block; padding: 6px 9px 5px; font-family: Arial, sans-serif; font-weight: bold; line-height: 1; background: #222; color: #999; text-decoration: none; vertical-align: top; } .slideout-menu .slideout-menu-toggle:hover { color: #fff; } .slideout-menu ul { list-style: none; font-weight: 300; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .slideout-menu ul li { /*border-top: 1px solid #dddddd;*/ border-bottom: 1px solid #dddddd; } .slideout-menu ul li a { position: relative; display: block; padding: 10px; color: #999; text-decoration: none; } .slideout-menu ul li a:hover { background: #aaaaaa; color: #fff; } .slideout-menu ul li a i { position: absolute; top: 15px; right: 10px; opacity: .5; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="slideout-menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;MANUALS&lt;/a&gt; &lt;ul class="mobile-sub-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;NEWS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;SPARE PART&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Photo Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;WHERE TO BUY&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;SUPPORT&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;EDIT BOOK&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>I add some sub-item under MANUALS main item. What can I do to make its sub-menu hide and show when I click on its parent main item?</p> <p>I try to write some jQuery code but right now only can hide the item but cannot let it show again. Is something wrong on my jQuery code?</p>