JavaScript navigation UI I think that the slice() is a bit hacky, and prone to breaking if I change my mind about the id names, but I wanted this to be generic so I could add types easily.

Is there maybe another / better way to do this just using CSS nesting the 'panels' inside the li elements?

Markup:



   &lt;ul id="type-select"&gt;
    &lt;li&gt;&lt;a id="type-1" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="type-2" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    ...
   &lt;/ul&gt;

   &lt;div id="panel-1" class="panel"&gt;blah&lt;/div&gt;
   &lt;div id="panel-2" class="panel"&gt;blah&lt;/div&gt; 
   ...   


JavaScript:



function switchType(type){
    $("#type-select li a").removeClass("selected-type");
    $("#type-"+type).addClass("selected-type");
    $(".panel").removeClass("selected-panel");
    $("#panel-"+type).addClass("selected-panel");   
}

// initial state
$("#no-results").hide();
switchType("1");
$("#type-select li a").click(function(){switchType(this.id.slice(5))});
This kind of navigation is usually referred to as tabs or tabbed navigation. There are loads of ready scripts on the net for this - for exampe - since you are using jQuery - jQuery UI. But since this is really a quite trivial functionality, it's quite okay to implement it yourself.

To make the implementation cleaner, you can add a direct reference to the matching panel in the link. I would use the href attribute and refer to the panel using a URL hash. This has the advantage, that it will work without JavaScript or CSS by scrolling to the chosen panel.

You can drop the ids on the links and use a direct reference to them in the function.

&lt;ul id="type-select"&gt;
  &lt;li&gt;&lt;a href="#panel-1"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#panel-2"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


Consider using the CSS :target pseudo class for the functionality:

.panel { display: none; }
.panel:target { display: block; }


And add JavaScript, for browsers that don't support it and to set the classes:

$("#type-select li a").click(function(){return switchType(this)});

function switchType(link){
    var hashPos = link.href.indexOf("#");
    if (hashPos &gt;= 0) {
      // Parsing out the hash and removing '#', in case the href
      // attribute contains a complete URL, and in case some other
      // method than a CSS selector is used to find the panel
      var panelId = link.href.substring(hashPos + 1);

      $("#type-select li a").removeClass("selected-type");
      $(link).addClass("selected-type");
      $(".panel").removeClass("selected-panel");
      $("#" + panelId).addClass("selected-panel");   
    }
    return false;
}


Don't forget to return false so the the default action of the link (which will lead to unnecessary scrolling) is canceled.