title: How do you swap DIVs on mouseover (jQuery)?
body: <p>This most be the second most simple rollover effect, still I don't find any simple solution.</p>
  
  <p><strong>Wanted:</strong> I have a list of items and a corresponding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.</p>
  
  <p>The following code works, but <em>is awful</em>. How can I get this behaviour in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function switchTo(id) {
      document.getElementById('slide1').style.display=(id==1)?'block':'none';
      document.getElementById('slide2').style.display=(id==2)?'block':'none';
      document.getElementById('slide3').style.display=(id==3)?'block':'none';
      document.getElementById('slide4').style.display=(id==4)?'block':'none';
      document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
      document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
      document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
      document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
  }
  &lt;/script&gt;
  
  &lt;ul id="switches"&gt;
    &lt;li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;"&gt;First slide&lt;/li&gt;
    &lt;li id="switch2" onmouseover="switchTo(2);"&gt;Second slide&lt;/li&gt;
    &lt;li id="switch3" onmouseover="switchTo(3);"&gt;Third slide&lt;/li&gt;
    &lt;li id="switch4" onmouseover="switchTo(4);"&gt;Fourth slide&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="slides"&gt;
    &lt;div id="slide1"&gt;Well well.&lt;/div&gt;
    &lt;div id="slide2" style="display:none;"&gt;Oh no!&lt;/div&gt;
    &lt;div id="slide3" style="display:none;"&gt;You again?&lt;/div&gt;
    &lt;div id="slide4" style="display:none;"&gt;I'm gone!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>