Two jQuery effect with one click

Question

im trying to make a template with jQuery accordion. i just need to open 2 different div with 2 different effect with one click.

My Codes:

jQuery:

$(document).ready(function() {
    $('div.question').click(function() {
        $('div.answer').slideUp(600);   
        $(this).next().slideDown(600);
    });
    $("div.answer").hide();
});

HTML:

<div class="question">Question</div>
<div class="answer">Answer</div>

but, im tring to make somthing like this, showing 2 div with 2 effect after click on question:

jQuery:

$(document).ready(function() {
    $('div.question').click(function() {
        $('div.answer').slideUp(600);   
        $('div.tip').fadeIn();  
        $(this).next().slideDown(600);
        $(this).next().fadeOut();
    });
    $("div.answer").hide();
    $("div.tip").hide();
});

HTML:

<div class="question">Question</div> <!--On click-->
<div class="answer">Answer</div> <!--Open with slide effect-->
<div class="tip">Tip</div> <!--Open with fade in effect-->

How i can show 2 DIV with 2 effects after click on question?

Demo with problem: http://jsfiddle.net/3RtKS/

How i can do that? How i can show 2 DIV with 2 effects after click on question? — Alireza, Aug 20 '12 at 10:22
The idea behind your code is valid. I don't see any immediate syntax issues. So what is the exact problem you are facing? — Flater, Aug 20 '12 at 10:25
my problem is, after click on question, my answer will be hide! http://jsfiddle.net/3RtKS/ — Alireza, Aug 20 '12 at 10:27
I suspect adeneo's question was more along the lines of "What precisely is the problem?". You have some code does it not work? What happens when it runs, etc. Also could you clarify the exact visual effects you are going for? If I copy the HTML and Javascript that you gave into jsfiddle then it does nothing... Also to address the question doing two effects should be no different than doing one. Your current code already seems to do two things (a slide up and a slide down) so its a little unclear where the problem is... — Chris, Aug 20 '12 at 10:29
its a accordion, my accordion have a 2 effect, slide up and down, but i want to add a new div with fade in effect, so after click on quetion, my answer will be showing with slide down and i need to show tips with fade in effect! — Alireza, Aug 20 '12 at 10:33

mgraph · Answer 1 · 2012-08-20T10:42:47.450

1

not sure what you mean, try this:

$(document).ready(function() {
    $('div.question').click(function() {
        $('.answer').slideUp(600);   
        $('.tip').fadeOut(600);

        $(this).next('.answer').slideToggle(600);   
        $(this).next('.answer').next('.tip').fadeToggle(600);
    });
    $("div.answer").hide();
    $("div.tip").hide();
});

demo : http://jsfiddle.net/3RtKS/7/

edited Aug 20 '12 at 10:42

answered Aug 20 '12 at 10:26

mgraph

15,238
4
41
75

how i cane use more than 1 in one page? i have to make 5-6 question with this effect. – Alireza Aug 20 '12 at 10:34
Thank u and my last question, i need to close last question when im click on new question. i need to show one by one, click in question 1, open answer 1, then when im click on question 2, i need to close question 1 automatic! – Alireza Aug 20 '12 at 10:39

score 1 · Accepted Answer · answered Aug 20 '12 at 10:38

I've updated a fiddle: http://jsfiddle.net/3RtKS/5/

The gist is that you need two next's to find the hint and I swapped the fade in and fade out to be how I think you wanted them:

$('div.question').click(function() {
    $('div.answer').slideUp(600);   
    $('div.tip').fadeOut();  
    $(this).next().slideDown(600);
    $(this).next().next().fadeIn();
});

I also created a second fiddle that I think is possibly a better and more contained way of doing this - next seems a little fragile.

http://jsfiddle.net/3RtKS/3/

This nests the answer and tip inside the question element (though you could add new elements). This has the advantage that you just need to find the tip and answer inside the question element clicked on to deal with.

The script then becomes:

$('div.question').click(function() {
    $('div.answer').slideUp(600);   
    $('div.tip').fadeOut();  
    $('div.answer', this).slideDown(600);
    $('div.tip', this).fadeIn();
});

and the HTML:

<div class="question">Question 
    <div class="answer">Answer</div>
    <div class="tip">Tip</div>
</div>

In a final thing I'd probably have a few more divs (eg a questionText div) to make it easier to manage.

Glad to have helped. The fiddle helped a lot and you probabyl want to consider always putting one into this kind of question. :) — Chris, Aug 20 '12 at 10:43

Two jQuery effect with one click

2 Answers2