Brand new to jquery. See below code -

<script>
 $(document).ready(function(){
 $('#leftbar').hide();
  
 $("#longbar").mouseover(function(){
 $("#leftbar").show();
 $("#longbar").hide();
 return false;
 });
 $("#longbar").mouseout(function(){
 $("#leftbar").hide();
 $("#longbar").show();
 return false;
 });
});
</script>

Essentially, I'm trying to achieve something very simple.

1. When the page loads I want everything except #leftbar visible.

2. When user runs cursor over #longbar I would like #longbar to vanish and #leftbar to replace it. Everything else should remain as is on the page

3. Then, when the cursor leaves #leftbar I would like page to return to its original state ie, everything visible except #leftbar

Clearly my logic is wrong in the above code. Help please.

Mart