Thanks for all the comments. It seems that this tread has gone off on a bit of a tangent. My question wasn't actually about how to make a FAQ, I just used those terms in the demo to possibly help understand the relation between the elements. The solution I was looking for was the indexOf() as suggested by @אריה גלזר which gets the index of the array item.
In the actual code where I needed this the elements are not together in the DOM so getNext(), getChild() etc. are not viable solutions. Chris On 12 feb, 09:28, ibolmo <[email protected]> wrote: > or:http://mootools.net/shell/kss2C/3/ > > The UL is unnecessary, but the idea is to just look at the next > element. No need to do any fancy calculations or mess with > attributes. ;) > > I was trying to do a css solution (where the question is just a parent > container. Think: <li class="question"><p>Question?</p><p > class="answer">Answer.</p></li>): > > #faq .question .answer { display: none } > #faq .question:focus .answer { display: block } > > but :focus is only for keyboard accessible elements (lame) (although > you could setup an anchor for the question, but the selector becomes > complicated). > :active does work, however; but it's only if you want them to click > and read 'cus when they let go of the mouse it'll go back to display > none. > > On Feb 11, 3:28 pm, Rolf -nl <[email protected]> wrote: > > > Well, if you're doing a Q/A thing than I think a DL list with DT = Q > > and DD = A is even more semantic, better looking, whatever.. > > But then, if you read the specs, a DD shouldn't contain much else than > > text, but that's mainly the case with Q/A's anyway. > > > I've done things both ways, but most of the time doing all this in JS > > (storing it in an array or whatever) is too much. But it all depends > > on the project; how large is the site, how many people are working on > > it, what are the inhouse standards you are following, etc. etc. There > > are always 10 ways of doing things in this web stuff, that's why we > > always have dilemma's about "how would others do this".. at least, I > > have those :) > > > On Feb 11, 3:36 pm, Roman Land <[email protected]> wrote: > > > > Its possibly more useful when the developing team is a one man show, but > > > you > > > still leave your HTML to be edited by other members of the team. > > > > Also, I like being dependent on as few entities as possible, so when you > > > want to change something its a breeze. > > > > IMO, in this case HTML provides the unsorted list facility > > > <UL><LI></LI></UL> so these questions + answers can be grouped in one LI, > > > this not only looks better (readable) in HTML and follows a more standard > > > way about handling lists of items. > > > > Never the less, one of the big strengths and weakness with web development > > > is the number of options and openness for creativity, I am suggesting some > > > more options.. > > > > On Thu, Feb 11, 2010 at 4:09 PM, אריה גלזר <[email protected]> wrote: > > > > i disagree with your assumption that the use of the id attribute is an > > > > html->js markup. It is good for semantic purposes. it is also important > > > > for > > > > accessibility. > > > > this specific use case for example, is not about html->js markup. giving > > > > questions and answers unique ids that correlate with each other is both > > > > good > > > > semantics and good for usability (eg allowing anchoring). > > > > > ----------- > > > > אריה גלזר > > > > 052-5348-561 > > > > 5561 > > > > > On Thu, Feb 11, 2010 at 15:50, Roman Land <[email protected]> wrote: > > > > >> As mentioned by other member of this group, utilizing the elements (id > > > >> class etc.. ) attributes can and will cause issues when other > > > >> developers > > > >> (and especially designers) are also working with the same code. > > > > >> It is also my personal preference to minimize HTML -> JS markup, html > > > >> & JS > > > >> code stays cleaner and you end up with more editable coherent code > > > >> both in > > > >> JS and in HTML. > > > > >> IMHO. > > > > >> On Thu, Feb 11, 2010 at 11:18 AM, אריה גלזר > > > >> <[email protected]>wrote: > > > > >>> i can't see the problem. > > > >>> Assigning IDs isn't inefficient. We use classes for elements that > > > >>> don't > > > >>> specifically require a unique identity, or elements that might have > > > >>> multiple > > > >>> appearances with the same behavior. Another use case is when we want > > > >>> to > > > >>> generalize a behavior to a wide variety of html structures (for eg > > > >>> when we > > > >>> write plugins). > > > >>> In your case, each question-answer is unique, and has an identity on > > > >>> it's > > > >>> own. Thus, assigning them IDs is the better, and faster solution > > > >>> (using id > > > >>> selectors is always much faster than using class selectors, > > > >>> *because*they are unique). When you can safely use IDs, you should. > > > >>> Also, the IDs allow you to add semantic value to your structure. the > > > >>> best > > > >>> way to mark the connection between an answer and a question is a DL, > > > >>> but > > > >>> if your structure won't let you couple them in that fashion (if the > > > >>> lists > > > >>> must be apart), using coupled IDs is a next best solution. > > > > >>> all of this is at least the way i see things. > > > >>> ----------- > > > >>> אריה גלזר > > > >>> 052-5348-561 > > > >>> 5561 > > > > >>> On Thu, Feb 11, 2010 at 11:03, cbolson <[email protected]> wrote: > > > > >>>> > actually, i think the most efficient way to do this is to mark the > > > >>>> questions > > > >>>> > and answers with grouped id's: > > > >>>> > <div id='q14' class = 'question'></div> > > > > >>>> > <div id='a14' class = 'answer'></div> > > > > >>>> > and then you could do: > > > > >>>> > a_id = 'a'+this.get('id').substr(1); > > > > >>>> Funnily enough that is the way I "used" to do it - ie assigning > > > >>>> unique id's to all the questions and answerd (eg) until I got my > > > >>>> head > > > >>>> round arrays and indexes (in Mootools). > > > >>>> As I understand it this would make for simpler code and less html > > > >>>> markup (ie no "ids" on all the elements). > > > >>>> However, you say that using arrays is less efficent in this case so > > > >>>> now I am not so sure.... time to do a couple of tests... > > > > >>>> Chris > > > > >>>> On 11 feb, 09:43, אריה גלזר <[email protected]> wrote: > > > >>>> > actually, i think the most efficient way to do this is to mark the > > > >>>> questions > > > >>>> > and answers with grouped id's: > > > >>>> > <div id='q14' class = 'question'></div> > > > > >>>> > <div id='a14' class = 'answer'></div> > > > > >>>> > and then you could do: > > > > >>>> > a_id = 'a'+this.get('id').substr(1); > > > > >>>> > this is much simpler and more efficient than creating an array of > > > >>>> > all > > > >>>> > answers and question, and IMO more semantic as well. > > > >>>> > if you anticipate a question will be clicked multiple times than > > > >>>> element > > > >>>> > storage can be a good solution, but in a q-a scenario i think most > > > >>>> times > > > >>>> > element storage is an overkill. > > > >>>> > ----------- > > > >>>> > אריה גלזר > > > >>>> > 052-5348-561 > > > >>>> > 5561 > > > > >>>> > On Wed, Feb 10, 2010 at 23:48, cbolson <[email protected]> wrote: > > > >>>> > > Thanks all for your help :) > > > >>>> > > I think that it was the indexOf that I was missing in all my > > > >>>> various > > > >>>> > > attempts. > > > > >>>> > > Using getNext(), whilst it works in my example in mooshell, won't > > > >>>> > > actually work in my actual code as the elements aren't > > > >>>> > > "together". > > > > >>>> > > Cheers, > > > >>>> > > Chris > > > > >>>> > > On 10 feb, 22:30, Ryan Florence <[email protected]> wrote: > > > >>>> > > > I'd personally create the arrays and do the indexOf in this > > > >>>> scenario. > > > > >>>> > > > But there's a chance the actual use case could call for storing > > > >>>> the > > > >>>> > > > answers with the questions then simply retrieving the element > > > >>>> using > > > >>>> > > > el.store and el.retrieve. > > > > >>>> > > > On Feb 10, 2010, at 2:04 PM, אריה גלזר wrote: > > > > >>>> > > > >http://mootools.net/shell/K55zK/3/ > > > >>>> > > > > this in an event always points to the element. > > > >>>> > > > > knowing that, here are 2 solutions for this that i can think > > > >>>> > > > > of: > > > >>>> > > > > 1. creating a questions array and using indexOf > > > >>>> > > > > 2. using getNext() to fetch the nearest answer > > > > >>>> > > > > both are shown in the example above. > > > >>>> > > > > ----------- > > > >>>> > > > > אריה גלזר > > > >>>> > > > > 052-5348-561 > > > >>>> > > > > 5561 > > > > >>>> > > > > On Wed, Feb 10, 2010 at 22:41, cbolson <[email protected]> > > > >>>> wrote: > > > >>>> > > > > Is it possible to get the index of the element (eg) clicked > > > >>>> > > > > when > > > >>>> using > > > >>>> > > > > event delegation? > > > > >>>> > > > > Here is my example code: > > > > >>>> > > > > var comments=$$('.answer').hide(); > > > > >>>> > > > > document.id('faq').addEvent('click:relay(.question)', > > > >>>> function(){ > > > >>>> > > > > // how to get the "index" of the item clicked so that > > > >>>> this > > > >>>> > > > > next line will work? > > > >>>> > > > > comments[index].show(); > > > >>>> > > > > }); > > > > >>>> > > > > Code in mooshell: > > > >>>> > > > >http://mootools.net/shell/kss2C/ > > > > >>>> > > > > Thanks in advance for any suggestions, I am probably missing > > > >>>> something > > > >>>> > > > > obvious :( > > > > >>>> > > > > Chris > > > > >> -- > > > >> --- > > > >> "Make everything as simple as possible, but not simpler." > > > > >> - Albert Einstein > > > > -- > > > --- > > > "Make everything as simple as possible, but not simpler." > > > > - Albert Einstein
