[jQuery] hiding a <div> using html select (drop down)
I tried to hide the <div id="divarea"> using the toggle() function below.
javascript code
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").click(function() {
$("#divarea").toggle();
});
});
</script></blockquote>
<div>
html code
</div><blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">
<select id="dropdown" name="layout">
<option>None</option>
<option value="single">Single</option>
<option value="double">Double</option>
</select>
<br /><br />
<div id="divarea">Louie Miranda (web.LM), JQuery show/hide toggle effect</div>
</blockquote>
Unfortunately, upon clicking the <select> drop down switch, it automatically hides it right away. How can I hide it, if it only selects the value "Double"?
I have the actual demo here:
<a href="http://labs.louiemiranda.net/js/jquery_show_hide_toggle_dropdown.php">http://labs.louiemiranda.net/js/jquery_show_hide_toggle_dropdown.php</a>
Help!<br clear="all">--
Louie Miranda (<a href="mailto:lmiranda@gmail.com">lmiranda@gmail.com</a>)
<a href="http://www.louiemiranda.net">http://www.louiemiranda.net</a>
Security Is A Series Of Well-Defined Steps
chmod -R 0 / ; and smile :)