Home/ Questions/Q 8109069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T01:18:32+00:00

Here is the JS Fiddle . I would like the content to be somewhat

  • 0

Here is the JS Fiddle. I would like the content to be somewhat interactive, and just click the content to hide it. To allow the user to bring it back if s/he would like to, the hidden portion appears in the <aside> section to the right. I have the ‘header’ (Business Approach) working as it must remain as a Parent DOM element. I have been struggling getting the children to work. My current attempt for the children is/are this (also posted on the fiddle):

    //individual BA elements Toggle Buttons
    //Currently on, turning Off
        $('.block > .businessapproaches > section > input').on('change', function () {
            if (this.checked) {
            } else {
                var index = $(this).prevAll('section').length;
                $('.block > .businessapproaches > section').eq(index).hide();
                $('fieldset.businessapproaches > label').eq(index+1).show();
                $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , false);
                console.log("off")
                console.log("left index: " + index);
                console.log($('.block > .businessapproaches > section').eq(index));
                console.log($('fieldset.businessapproaches > label').eq(index+1));
            }
        });
    //Currently off, turning On
        $('fieldset.businessapproaches > input').on('change', function () {
            if (this.checked) {
            } else {
                var index = $(this).prevAll('section').length+1;
                $('.block > .businessapproaches > section').eq(index-1).show();
                $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
                $('fieldset.businessapproaches > label').eq(index).hide();
                console.log("on")
                console.log("right index: " + index);
                console.log($('.block > .businessapproaches > section').eq(index-1));
                console.log($('fieldset.businessapproaches > label').eq(index));
            }
        });

Sorry to post 2 questions in the same stack, but it seems relevant, and I’m trying quickly to get to a rep of 125 so I can post multiple questions without having to wait the prescribed time)

BONUS POINTS: Can tell me why the ‘header’ (Business Approach) is clickable by either the checkbox or the text, while the children are not? Where is my error, as I will eventually hide the ‘boxes’ with css.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tried in fiddle http://fiddle.jshell.net/guanxiaohua2k6/dpvAn/1/. I think it worked as you want.

    I will show where to modify below.

    @@ -10 +10 @@
-                    var index = $(this).prevAll('section').length;
+                    var index = $(this).closest('section').prevAll('section').length;
@@ -13 +13 @@
-                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' ,     false);
+                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , true);
@@ -24 +24 @@
-                    var index = $(this).prevAll('section').length+1;
+                    var index = $(this).prevAll('input').length;
@@ -26 +26 @@
-                    $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
+                    $('.block > .businessapproaches > section > input').eq(index-1).prop('checked' , true);

    As to why the ‘header’ of children couldn’t be clicked, the inputs’ ids are duplicated with ones in <aside>.

    • 0