<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>

[{'answer_id': 34564, 'author': 'Konrad Rudolph', 'author_id': 1968, 'author_profile': 'https://Stackoverflow.com/users/1968', 'pm_score': 0, 'selected': False, 'text': "<p>The only thing that's wrong with this code (at least to me) is that you're not using a loop to process all elements. Other than that, why not to it like that?</p>\n\n<p>And with loop, I mean grabbing the container element via a JQuery and iterating over all child elements – basically a one-liner.</p>\n"}, {'answer_id': 34617, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 3, 'selected': False, 'text': '<p>Here\'s the jQuery version:</p>\n\n<pre><code>&lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript"&gt;\n$(function () {\n    $("#switches li").mouseover(function () {\n        var $this = $(this);\n        $("#slides div").hide();\n        $("#slide" + $this.attr("id").replace(/switch/, "")).show();\n        $("#switches li").css("font-weight", "normal");\n        $this.css("font-weight", "bold");\n    });\n});\n&lt;/script&gt;\n\n&lt;ul id="switches"&gt;\n  &lt;li id="switch1" style="font-weight:bold;"&gt;First slide&lt;/li&gt;\n  &lt;li id="switch2"&gt;Second slide&lt;/li&gt;\n  &lt;li id="switch3"&gt;Third slide&lt;/li&gt;\n  &lt;li id="switch4"&gt;Fourth slide&lt;/li&gt;\n&lt;/ul&gt;\n&lt;div id="slides"&gt;\n  &lt;div id="slide1"&gt;Well well.&lt;/div&gt;\n  &lt;div id="slide2" style="display:none;"&gt;Oh no!&lt;/div&gt;\n  &lt;div id="slide3" style="display:none;"&gt;You again?&lt;/div&gt;\n  &lt;div id="slide4" style="display:none;"&gt;I\'m gone!&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 34646, 'author': 'Dmitry Mukhin', 'author_id': 3448, 'author_profile': 'https://Stackoverflow.com/users/3448', 'pm_score': 2, 'selected': False, 'text': '<pre><code>&lt;html&gt;\n&lt;head&gt;\n&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript"&gt;\n\n$(document).ready(\n  function(){\n    $( \'#switches li\' ).mouseover(\n      function(){\n        $( "#slides div" ).hide();\n        $( \'#switches li\' ).css( \'font-weight\', \'normal\' );\n        $( this ).css( \'font-weight\', \'bold\' );\n        $( \'#slide\' + $( this ).attr( \'id\' ).replace( \'switch\', \'\' ) ).show();\n      }\n    );\n  }\n);\n\n&lt;/script&gt;\n&lt;/head&gt;\n&lt;body&gt;\n&lt;ul id="switches"&gt;\n  &lt;li id="switch1" style="font-weight:bold;"&gt;First slide&lt;/li&gt;\n  &lt;li id="switch2"&gt;Second slide&lt;/li&gt;\n  &lt;li id="switch3"&gt;Third slide&lt;/li&gt;\n  &lt;li id="switch4"&gt;Fourth slide&lt;/li&gt;\n&lt;/ul&gt;\n&lt;div id="slides"&gt;\n  &lt;div id="slide1"&gt;Well well.&lt;/div&gt;\n  &lt;div id="slide2" style="display:none;"&gt;Oh no!&lt;/div&gt;\n  &lt;div id="slide3" style="display:none;"&gt;You again?&lt;/div&gt;\n  &lt;div id="slide4" style="display:none;"&gt;I\'m gone!&lt;/div&gt;\n&lt;/div&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 34710, 'author': 'Carl Meyer', 'author_id': 3207, 'author_profile': 'https://Stackoverflow.com/users/3207', 'pm_score': 5, 'selected': True, 'text': '<p>Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {\r\n  switches = $(\'#switches &gt; li\');\r\n  slides = $(\'#slides &gt; div\');\r\n  switches.each(function(idx) {\r\n    $(this).data(\'slide\', slides.eq(idx));\r\n  }).hover(\r\n    function() {\r\n      switches.removeClass(\'active\');\r\n      slides.removeClass(\'active\');\r\n      $(this).addClass(\'active\');\r\n      $(this).data(\'slide\').addClass(\'active\');\r\n    });\r\n});</code></pre>\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#switches .active {\r\n  font-weight: bold;\r\n}\r\n#slides div {\r\n  display: none;\r\n}\r\n#slides div.active {\r\n  display: block;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n  &lt;title&gt;test&lt;/title&gt;\r\n\r\n  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;\r\n  &lt;script type="text/javascript" src="switch.js"&gt;&lt;/script&gt;\r\n\r\n&lt;/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n  &lt;ul id="switches"&gt;\r\n    &lt;li class="active"&gt;First slide&lt;/li&gt;\r\n    &lt;li&gt;Second slide&lt;/li&gt;\r\n    &lt;li&gt;Third slide&lt;/li&gt;\r\n    &lt;li&gt;Fourth slide&lt;/li&gt;\r\n  &lt;/ul&gt;\r\n  &lt;div id="slides"&gt;\r\n    &lt;div class="active"&gt;Well well.&lt;/div&gt;\r\n    &lt;div&gt;Oh no!&lt;/div&gt;\r\n    &lt;div&gt;You again?&lt;/div&gt;\r\n    &lt;div&gt;I\'m gone!&lt;/div&gt;\r\n  &lt;/div&gt;\r\n\r\n&lt;/body&gt;\r\n\r\n&lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 34718, 'author': 'Neall', 'author_id': 619, 'author_profile': 'https://Stackoverflow.com/users/619', 'pm_score': 3, 'selected': False, 'text': '<p>Here\'s my light-markup jQuery version:</p>\n\n<pre><code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;\n&lt;script type="text/javascript"&gt;\nfunction switchTo(i) {\n  $(\'#switches li\').css(\'font-weight\',\'normal\').eq(i).css(\'font-weight\',\'bold\');\n  $(\'#slides div\').css(\'display\',\'none\').eq(i).css(\'display\',\'block\');\n}\n$(document).ready(function(){\n  $(\'#switches li\').mouseover(function(event){\n    switchTo($(\'#switches li\').index(event.target));\n  });\n  switchTo(0);\n});\n&lt;/script&gt;\n&lt;ul id="switches"&gt;\n  &lt;li&gt;First slide&lt;/li&gt;\n  &lt;li&gt;Second slide&lt;/li&gt;\n  &lt;li&gt;Third slide&lt;/li&gt;\n  &lt;li&gt;Fourth slide&lt;/li&gt;\n&lt;/ul&gt;\n&lt;div id="slides"&gt;\n  &lt;div&gt;Well well.&lt;/div&gt;\n  &lt;div&gt;Oh no!&lt;/div&gt;\n  &lt;div&gt;You again?&lt;/div&gt;\n  &lt;div&gt;I\'m gone!&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>This has the advantage of showing all the slides if the user has javascript turned off, uses very little HTML markup and the javascript is pretty readable. The <code>switchTo</code> function takes an index number of which <code>&lt;li&gt;</code> / <code>&lt;div&gt;</code> pair to activate, resets all the relevant elements to their default styles (non-bold for list items, <code>display:none</code> for the DIVs) and the sets the desired <code>list-item</code> and <code>div</code> to <code>bold</code> and <code>display</code>. As long as the client has javascript enabled, the functionality will be exactly the same as your original example.</p>\n'}]
['https://Stackoverflow.com/questions/34536', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3377/']