JQuery SlideUP and SlideDown based on Selector Help

I'm teaching myself jQuery and having fun trying to figure this out. I'm using the slideDown and slideUp functions to have different <div>'s appear and disappear if needed. But my problem is in the removal. I can get the different selected options to appear separately, however, if both <div>'s are showing when I try to remove just one of the <div>'s, both <div>'s flash quickly and then both disappear. It also happens when only one of the <div>'s is showing too. I click the remove link and both <div>'s flash quickly and then disappear. I really haven't got a clue as to why. The idea behind this code is to allow a user to add to and take away as needed. If a selection was made in mistake, the user would be able to remove it while the other selections that were previously selected stay visible. Here's my code:

<div class="type-select" style="width:400px;">
<select nam开发者_如何转开发e="selectStatus">
<option selected value="Select">Select...</option>
<option id="login">Login</option>
<option id="nav">Navigation</option>
</select></div>
<div id="loginselect"><img src="http://triplemsystems.ekkosolutions.com/images/global/bg-loginPages.gif" height="47" width="162" />
<a id="remove" href="">Remove</a></div>
<div id="navselect"><img src="http://triplemsystems.ekkosolutions.com/images/global/bg-navMain.gif" height="45" width="90"/>
<a id="removenav" href="">Remove</a></div>
<script>
$("#loginselect").hide("fast");
$("select").change(function(){
    if($("#login").is(":selected")){ 
        $("#loginselect").slideDown("slow");}
});
$("#remove").click(function() {
    $("#loginselect").slideUp("slow");
});

$("#navselect").hide("fast");
$("select").change(function () {
    if($("#nav").is(":selected")){
        $("#navselect").slideDown("slow");}
});

$("#removenav").click(function() {
    $("#navselect").slideUp("slow");});

</script>

Am I even on the right path?

---

You are on the right path, I think the problem is that you are not preventing the default action of the links, and so the page is being refreshed (causing you to see the divs for a second). You can prevent the default action of a link by accepting an event parameter and calling .preventDefault() on it, i.e:

$("#remove").click(function(e) {
    e.preventDefault();
    $("#loginselect").slideUp("slow");
});

Here it is working: http://jsfiddle.net/XzDzb/