first lets take a look at the HTML also for the round corners i would suggest the jquery.corner plugin which helps me a lot
<style type="text/css"> * { margin:0; padding:0; } #list { background-color:#999; } #list div { display:inline-block; } #alphabets li { list-style-type:none; margin: 2px 0; padding:2px; } .contents { padding:2px; } </style> <div id="list"> <!-- wrapper --> <div> <ul id="alphabets"> <li><a href="A"></li> <li><a href="B"></li> <li><a href="C"></li> </ul> </div> <div> <div class="contents"> Dodge<br /> </div> <div class="contents"> Ford<br /> </div> <div class="contents"> Geo<br /> GMC<br /> </div> </div> now we focus on the script :) <script type="text/javascript"> $(function() { // create a reference point var obj = $("#list"); // create reference to your click-able options var headings = $("#alphabets li", obj); // create reference points for content for each options var contents = $("div.contents", obj); // declare the initial state var index = 0; // hide all contents contents.hide(); // show initial content contents.eq(index).show(); // add active class headings.eq(index).addClass("active"); // click event headings.click(function(e) { // prevent default hyperlink behavior e.preventDefault(); // get the current list item clicked var current = headings.index($(this)); // do transition only if the selected list item is not clicked if(index != current) { // hide old contents.eq(index).hide(); // remove old active headings.eq(index).removeClass("active"); // add new active headings.eq(current).addClass("active"); // show new contents.eq(current).show(); // reset index index = current; } }); }); sorry if i have syntax errors i scripted this in like 5 minutes. kinda in a hurry </script> On Wed, Jun 3, 2009 at 8:13 PM, Dave Joyce <davidjo...@exit42design.com>wrote: > > > I'm trying to figure out a good way to approach this. > > Basically here's a shot of what's needed. > http://stuff.exit42design.com/grabup/475e4d0e25eaf92eefcecdd23af0b0c6.png > > It's an alphabetical list of letters down the left column. When you hover > over those letters, a list in a block on the right side (with overflow > hidden) moves up or down to the letter that's being hovered over. It's sort > of reminiscent of the iPhone alphabetical list on the right side of the > screen. > > I was thinking of creating the letters with anchors to the list as you > would > see on a normal html page. The question is, how can I tell the content > within the div to move up or down? How do I know how far to have it move? > -- > View this message in context: > http://www.nabble.com/Thoughts-on-creating-a-hoverable-alphabetical-list-tp23856494s27240p23856494.html > Sent from the jQuery General Discussion mailing list archive at Nabble.com. > >