I'm trying to have a click event where the user clicks a Div Question, then Jquery clones the Div Answer and displays it in a separate Div Clone.

Example here: /

For some reason the following variable is ing back null. Any ideas?

 var answer = $(this).parent().find(".faq-answer").clone();

Full code:

$(document).ready(function () {
    var faqQuestion = $('.faq-question');
    var faqClone = $('.faq-clone');

    faqQuestion.click(function () {
        showAnswer();
    });

    faqClone.click(function () {
        hideAnswer();
    });

    function showAnswer() {
        $(".faq-clone").hide("slide");
        $('.faq-clone').html("");

        var answer = $(this).parent().find(".faq-answer").clone();
        $('.faq-clone').append(answer.html());
        $(".faq-clone").show("slide");
    }

    function hideAnswer() {
        $(".faq-clone").hide("slide");
        $('.faq-clone').html("");
    }
});

I'm trying to have a click event where the user clicks a Div Question, then Jquery clones the Div Answer and displays it in a separate Div Clone.

Example here: http://jsfiddle/jessikwa/zNL63/2/

For some reason the following variable is ing back null. Any ideas?

 var answer = $(this).parent().find(".faq-answer").clone();

Full code:

$(document).ready(function () {
    var faqQuestion = $('.faq-question');
    var faqClone = $('.faq-clone');

    faqQuestion.click(function () {
        showAnswer();
    });

    faqClone.click(function () {
        hideAnswer();
    });

    function showAnswer() {
        $(".faq-clone").hide("slide");
        $('.faq-clone').html("");

        var answer = $(this).parent().find(".faq-answer").clone();
        $('.faq-clone').append(answer.html());
        $(".faq-clone").show("slide");
    }

    function hideAnswer() {
        $(".faq-clone").hide("slide");
        $('.faq-clone').html("");
    }
});

• javascript
• jquery
• html
• css
• clone

• 4 The referred element (this) is not being passed over to the functions. jsfiddle/zNL63/4 – emerson.marini Commented Aug 4, 2014 at 19:42
• Where is the point to clone an hidden element and show the clone ? jsfiddle/zNL63/11 – G-Cyrillus Commented Aug 4, 2014 at 20:10
• The Question/Answers are ing from a XML document through a VB loop. The desired effect is for the popup answer to be able to happen outside of the container holding the answer/question divs, so it seemed to be best to clone it into a separate div outside this container. – jessikwa Commented Aug 4, 2014 at 20:22

3 Answers 3

The easiest way to solve this would be to pass the handlers by reference:

faqQuestion.click(showAnswer);

faqClone.click(hideAnswer);

Now this inside of showAnswer and hideAnswer will be the clicked element.

You can not access element by $(this) within a function. You would need to pass that as a parameter.

Try:

function showAnswer(passedObject) {
    $(".faq-clone").hide("slide");
    $('.faq-clone').html("");

    var answer = passedObject.parent().find(".faq-answer").clone();
    $('.faq-clone').append(answer.html());
    $(".faq-clone").show("slide");
 }

and then you would use that function: showAnswer($(this))

or more logical & cleaner solution is what @Kevin B suggested.

Make it even simplier, use next() jQuery function

Is there any reason why you want to clone an hidden element and only show its clone ?

DEMO

$(document).ready(function () {
    var faqQuestion = $('.faq-question');
    var faqClone = $('.faq-answer');
    faqQuestion.click(showAnswer);
    faqClone.click(hideAnswer);

    function showAnswer() {
        $(this).next('.faq-answer').show('slide');
    }

    function hideAnswer() {
        $(this).hide("slide");
    }
});

and apply to .faq-answer the .faqClone CSS

You could even produce short answer from a data-attribute :) to shorten even more HTML .