Using variables within the :not() selector

Using variables within the :not() selector

I'm trying to do mouseover and mouseout commands for all items in a menu except for the one that is currently selected. When I pass a variable into the ":not()" selector, javascript ignores it. When I put in a non-variable for the ID, such as "#1", it works fine. What gives?




var selectedDiv;

var selectedDiv2 = "#0";
$(document).ready(function() {
   $('div.content').css("display", "none");
   
//   var isSelected = $(imgId).is(':visible');


      //HERE

   $('div#holder>div:not('+selectedDiv2+')').mouseover(function() {
         $(this).css({backgroundColor: '#668'});
   });
   

   $('div#holder>div:not('+selectedDiv2+')').mouseout(function() {
         $(this).css({backgroundColor: '#666'});
   });

   $('div#holder>div:not('+selectedDiv2+')').click(function() {
      
      selectedDiv = $(this).attr('id');

         // and HERE
      selectedDiv2 = "#" + selectedDiv;
      var expandMe = "div#content" + selectedDiv;
      var otherDiv = 'div#holder>div:not('+selectedDiv2+')';
      var contractMe = 'div.content:not(#content' + selectedDiv + ')';
      $(expandMe).slideDown("fast");
      $(selectedDiv2).css({backgroundColor: '#aac'});
      $(contractMe).slideUp("fast");
      $(otherDiv).css({backgroundColor: '#666'});
      
   });
});





<div id="holder">
   <div id="1">
       <h2 id="title1">First Item   </h2>
       <div class="content" id="content1">
        <p>Lorem ipsum </p>
        </div>
    </div>
   
   
   
   <div id="2">
       <h2 id="title2"> Second Item</h2>
        <div class="content" id="content2">
        Mauris placerat
        </div>
    </div>
   
   
   
   <div id="3">
       <h2 id="title3">Third Item</h2>
        <div class="content"  id="content3">
        Etiam sodales
        </div>
    </div>
   
   
   
    <div id="4">
       <h2 id="title4">Fourth Item</h2>
        <div class="content"  id="content4">
         Vestibulum ante ipsum
        </div>
    </div>
</div>