Question

So I have two sections, a fieldset panel div, and a “generated content” div. I am “moving” elements from one to another by hiding them on change from one section and unhiding them in the other section. For one particular section “Abstract”, which has a class .abstract and several elements all having the class oneseven, how do I change the width attribute of the sections based on how many are hidden?

Here is my code:

// Abstract
//hide initially
    $('fieldset.abstract label').hide();
//individual Abstract elements Toggle Buttons
    //Currently on, turning Off
        $('.block > .abstract > .superseven > section > .oneseven > input').on('change', function () {
            var hidden = 0;
            var width = Number((1/(7-hidden))*100);
            if (this.checked) {
            } else {
                var hidden = ($('.block > .abstract > .superseven > section > :hidden').length + 1);
                var width = Number((1/(7-hidden))*100);
                console.log(hidden);
                console.log('"' + Number(width) + '%"');
/*issue here*/      $('.oneseven').css("width", '"' + Number(width) + '%"');
                var index = $(this).closest('section').prevAll('section').length;
                $('.block > .abstract > .superseven > section').eq(index).hide("slow");
                $('fieldset.abstract > label').eq(index+1).show("slow");
                $('fieldset.abstract > input').eq(index+1).prop('checked' , true);
            }
        });
    //Currently off, turning On
        $('fieldset.abstract > input').on('change', function () {
            var hidden = 0;
            var width = Number((1/(7-hidden))*100);
            if (this.checked) {
            } else {
                var hidden = ($('.block > .abstract > .superseven > section > :hidden').length - 1);
                var width = Number((1/(7-hidden))*100);
                console.log(hidden);
                console.log('"' + Number(width) + '%"');
/*and here*/        $('.oneseven').css("width", '"' + Number(width) + '%"');
                var index = $(this).prevAll('input').length;
                $('.block > .abstract > .superseven > section').eq(index-1).show("slow");
                $('.block > .abstract > .superseven > section > .oneseven > input').eq(index-1).prop('checked' , true);
                $('fieldset.abstract > label').eq(index).hide("slow");
            }
        });

I can accomplish this in the console by typing $('.oneseven').css("width", "33.33%");
or changing the numeric value to 25% or 20%, etc…m but getting it in the JS section isn’t working.

I have tried:

• type casting it into an int using parseInt()
• changing it to a Number using JS (current code)
• entering everything with the width actually in number format in the console and it works

I think it is somewhere in the second parameter for the css attribute Jquery selector. How do I fixit?
Notes

I have the vars hidden and width twice, because I am not sure if they need to be global or not to solve this problem. I am trying to get it to work, then I can troubleshoot and see what scope is needed.

Answer 1

Yes, @pimvdb is correct, for some reason, the nested quotes are not needed, so the final line of code is
$('.oneseven').css("width", (width) + "%");

and the Number() type casting/conversions were not needed.