I got this code from scriptaculos and it toggles display of the answer
pat then the question part is clicked.
Javascript
=======$(document).ready(function () {
$
(''div.faqitem'').find(''div.answer'').hide().end().find(''div.question'').click(function()
{
$(this).next().slideToggle(); });
});
HTML Code
========<div class="faqitem">
<div class="question">
Topic
</div>
<div class="answer">
expansion
</div>
</div>
I am trying to extend the CSS to:
1. give the question part a different colour if the answer is empty
2. avoid expanding the answer section if it is empty.
Any pointers in how to do that?
I am a Javascript newbie and I''d love an example of how to achieve
this without the library just to know how things work. The source of
the page doesn''t include any onclick events. The event appears to be
trapped higher up and passed down to the divs.
There is the working page this code comes from
http://yogaredux.meripol.net/node/42
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hi, This looks a lot more like jQuery code then Prototype code to me. I think you''d be better of asking your related questions on the jQuery forums than here. Regards, Tobie On Jun 16, 3:28 pm, vfclists <vfcli...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> I got this code from scriptaculos and it toggles display of the answer > pat then the question part is clicked. > > Javascript > =======> $(document).ready(function () { > $ > (''div.faqitem'').find(''div.answer'').hide().end().find(''div.question'').click( function() > { > $(this).next().slideToggle(); }); > }); > > HTML Code > ========> <div class="faqitem"> > > <div class="question"> > Topic > </div> > > <div class="answer"> > expansion > </div> > > </div> > > I am trying to extend the CSS to: > > 1. give the question part a different colour if the answer is empty > > 2. avoid expanding the answer section if it is empty. > > Any pointers in how to do that? > > I am a Javascript newbie and I''d love an example of how to achieve > this without the library just to know how things work. The source of > the page doesn''t include any onclick events. The event appears to be > trapped higher up and passed down to the divs. > > There is the working page this code comes fromhttp://yogaredux.meripol.net/node/42--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Well the problem would be stepping back through the DOM, CSS as far as I know only descends in its selectors. Meaning that you can''t say "If this elements child is empty, then the element will be green" So i think you may have to use a different technology such as XPath or perhaps E4X, depends on your audience''s browser. You could use prototype to select all question containers and logically determine if their child is empty, that sounds like a lot of work. Depending on how you''re "building" the FAQ you could set a particular class to an element that doesn''t have an answer and then have a selector in your CSS referencing that rule? But to me as a usability stance, I wouldn''t post a question I don''t have an answer to, that''s going to irritate users. Here is a FAQ that I worked on, most of the code at work can be found in the FAQBoss.js file, it helps in common routines of a very similar nature. http://www.destinationoceans.com/FAQ/General.cfm On Jun 16, 3:50 pm, tobie <tobie.lan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi, > > This looks a lot more like jQuery code then Prototype code to me. > > I think you''d be better of asking your related questions on the jQuery > forums than here. > > Regards, > > Tobie > > On Jun 16, 3:28 pm, vfclists <vfcli...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > I got this code from scriptaculos and it toggles display of the answer > > pat then the question part is clicked. > > > Javascript > > =======> > $(document).ready(function () { > > $ > > (''div.faqitem'').find(''div.answer'').hide().end().find(''div.question'').click( function() > > { > > $(this).next().slideToggle(); }); > > }); > > > HTML Code > > ========> > <div class="faqitem"> > > > <div class="question"> > > Topic > > </div> > > > <div class="answer"> > > expansion > > </div> > > > </div> > > > I am trying to extend the CSS to: > > > 1. give the question part a different colour if the answer is empty > > > 2. avoid expanding the answer section if it is empty. > > > Any pointers in how to do that? > > > I am a Javascript newbie and I''d love an example of how to achieve > > this without the library just to know how things work. The source of > > the page doesn''t include any onclick events. The event appears to be > > trapped higher up and passed down to the divs. > > > There is the working page this code comes fromhttp://yogaredux.meripol.net/node/42--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---