Using switches to add blocks of HTML

Question

Here's what I am trying to do in (jquery,html):

The aim is to make it so that when I hit the switch (basic/advanced) a block of html is added to the existing html. Within this new block there will be another switch (less/more) which should added another block.

However I can't seem to (less/more) switch to work. In fact the function is not running at all.

The function that corresponds to the (basic/advanced) switch is:

var selectInvestment = "basic";
function expandInvestment(){
    $("input[type=radio][name=expandInformation]").click(function(){
        selectInvestment = $(this).val();
       var huge = 'huge block of html code in here';
        if(selectInvestment == "advanced"){
            $('.investmentBlock').empty();
            $('.investmentBlock').append(huge);
            expandedExpenses();
        } else if(selectInvestment == "basic"){
            $('.investmentBlock').replaceWith("<...more html code...>");
        }
    });
}

And it's similar for the less/more switch.

Here is jsfiddle preview. http://jsfiddle.net/1g6uraht/1/

see the console `Uncaught ReferenceError: repaymentSelection is not defined`, fi it — Mritunjay, Sep 04 '14 at 02:17
fwiw, you can tidy up your code by storing the blocks of html in a ` — Shanimal, Sep 04 '14 at 02:23

score 1 · Accepted Answer · answered Sep 04 '14 at 02:19

1

Because you're dynamically adding your new radio buttons, you'll need to use on

$("input[type=radio][name=expandedExpenses]").click(function(){

becomes

$("document").on('click', 'input[type=radio][name=expandedExpenses]', function(){

see jquery on

answered Sep 04 '14 at 02:19

Jason

734
1
7
17

I gave it a try, doesn't seem to work still. http://jsfiddle.net/sL9m65rw/ – Youbloodywombat Sep 04 '14 at 02:38
Nevermind, made a typo. Thanks a bunch!! – Youbloodywombat Sep 04 '14 at 02:47

Using switches to add blocks of HTML

1 Answers1