try this; [number] is either the SQL row ID of the name (good), or an arbitrary index (less good).
1) each checkbox gets a html id 'name_[number]_cb' 2) each name gets a html id 'name_[number]_label' 3) each circle gets a html id 'name_[number]_button' 4) each circle gets a html onclick='yournamespace.showInfoForName(this, event)' then load this js: var yournamespace = { showInfoForName : function (element, event) { //some vars that you need to intialize; var parent = $('table#names')[0]; //set only to parent <table> or <div> of names-list. //create the view var view = document.createElement ("DIV"); view.id = element.id+'_view'; view.className = 'namesInputView'; //style layout with CSS $(view).css ({ visibility : 'visible', display : none, //override: dont display anything yet position: 'absolute', width : '400px', //desired size, change if u want height : '300px' }) document.body.appendChild (view); //add it to the DOM somewhere to prevent IE mem leaks var viewHTML = ''; viewHTML += 'some INPUT fields and makeup'; view.innerHTML = viewHTML; //take the size of the view in case contents doesnt fit in it viewWidth = view.offsetWidth; viewHeight = view.offsetHeight; //figure out where to put the view var t = 0, l = 0, e = element; while (e!=parent) { t += e.offsetTop; l += e.offsetLeft; e = e.offsetParent; }; //optional: adjust t and l if the view is out of view (near edges of browser) //figure this one out 4 yourself. //move view to where it belongs in DOM document.body.removeChild (view); $(view).css ({ display: 'none', overflow: 'hidden', top : t+'px', left : l+'px', height : viewHeight+'px', //make sure everything is in view. at "desired size" you specify the desired width, height is adjusted to whats needed. zIndex: 99 }); parent.appendChild (view); $(view).fadeIn (700); //700 milliseconds } }; On Fri, Sep 5, 2008 at 9:51 PM, SEMMatt2 <[EMAIL PROTECTED]> wrote: > > Hello, > > I am fairly new to JQuery but it's so nice and simple to use that as > soon as I have some direction I can take it from there. So, my > question is, can anyone direct me regarding this project: > > I have a list of names (maybe a few hundred). Each name will have a > checkbox next to it. After clicking on a little circle press down > (forget what there called...) a box should slide open or come up right > next to the name that let's a user enter in some information (it's > about the name that they selected). Once they enter the information, > the box slides back into place. Then, the user scrolls down to the > bottom of the page and clicks submit. Everything gets submitted > (checked boxes and the more information). > > Thoughts...how would I use Jquery to accomplish this? > > Thanks, > Matt >