Hi Stella,
One of the beautiful things about jQuery is that you don't need to
put IDs everywhere in your markup just to do simple show/hide effects.
My most recent blog entry, Accordion Madness, shows a couple ways you
can achieve the showing and hiding effect, and it links to previous
entries on the same topic, as well as Jörn Zaefferer's Accordion plugin.
http://www.learningjquery.com/2007/03/accordion-madness
For your markup, you could use this code:
$(document).ready(function () {
$('div.answer').hide();
$('div.question').click(function() {
$(this).next('div.answer').slideToggle('fast');
});
});
I used .slideToggle('fast') because I like the way it looks, but you
could replace that with a regular .toggle()
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Mar 5, 2007, at 8:32 AM, Stella Power wrote:
Hi,
I'm new to jQuery so please bear with me if this is a stupid
question. I have gone through the tutorials on the site by the
way, I just haven't found a solution to it yet.
I have a page that is created on the fly using php. On the page
there are a variable number of question-answer pairs. Each
question and answer is in their own div and have their own unique
ids. Using the ready function I've set each answer to be hidden -
this was simple because each answer div has the same class. When a
user clicks on the question, I want the answer to appear underneath
this. I'm using the toggle() function for this.
It all works as expected. However, in order to toggle the correct
answer div, I've hardcoded the div ids. I need a way of
identifying which question was clicked on and then toggle the
appropriate answer. Is there anyway to pass in an argument perhaps?
My generated html code is like:
<div class="questions">
<div class="question" id="question_123">.......</div>
<div class="answer" id="answer_123">........</div>
<div class="question" id="question_739">.......</div>
<div class="answer" id="answer_739">........</div>
</div>
My jQuery code is:
$(document).ready(function () {
$('div.answer').hide();
$("#question_123").click(function() { $("#answer_123").toggle
(); });
$("#question_739").click(function() { $("#answer_739").toggle
(); });
});
Cheers,
Stella
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
