Databases
StackOverflow2013
Postsdbo
POJquery dropdown menu onclick
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery dropdown menu onclick
    text
    copied!<p>I am trying to make a simple dropdown menu with jquery but I cant seem to get any of the javascript to work. I have tried calling it externally. I am not sure what the problem can be, if you see a problem please let me know. Thanks.</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; #container{width:978px;} .content { display: none; padding-left: 5px; left: 0px; width: 100%; top: 30px; background: yellow; } ul{width: 100%;} li{ float: left; padding: 5px; background: #e5e5e5;} #div{ background: #9e9e9e; height: 20px; width: 978px; } br{ clear: left; }​ &lt;/style&gt; &lt;script type="text/javascript"&gt; $(function() { $('.action').click(function() { var name = $(this).attr("name"); var content = $('.content[name=' + name + ']'); $('.content').not(content).hide('fast'); content.slideToggle('fast'); }); });​ &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt;&lt;ul&gt; &lt;li&gt; &lt;a href="#" class="action" name="summer"&gt;summer&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" class="action" name="winter"&gt;winter&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" class="action" name="weather"&gt;weather&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;br&gt; &lt;div class="content" name="summer"&gt; &lt;a href="link"&gt;june&lt;/a&gt; &lt;a href="link"&gt;july&lt;/a&gt; &lt;/div&gt; &lt;div class="content" name="winter"&gt; &lt;a href="link"&gt;november&lt;/a&gt; &lt;a href="link"&gt;december&lt;/a&gt; &lt;/div&gt; &lt;div class="content" name="weather"&gt; &lt;a href="link"&gt;rain&lt;/a&gt; &lt;a href="link"&gt;sun&lt;/a&gt; &lt;/div&gt; &lt;div id="div"&gt;&lt;/div&gt;​ &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload