Question

I have a page that has a form and a generated content area that both have section and subsection hiding via checkboxes. (the checkboxes are hidden on the page, but not on the fiddle to show ‘checked’ state of the checkboxes)

Here is the fiddle. It may look like a lot, but hang in there, it really isn’t. I have what should be an easy problem, let me show you where the issue is.

I am trying to add functionality to the page, so that when a user deselects all subsections of a section from the left pane, that the section as a whole hides on the left, and the right side form lets you know the entire section is hidden (RED text in the fiddle), but doesn’t allow subsection changing to keep persistance. I can hide all subsections by clicking them in the left pane, with the left section disappearing, and the right subsections hiding themselves, and the right header notifying you it is is hidden on the left. The issue lies when the right header is clicked to unhide the section in the left, the subsections are no longer visible or ‘reset’.

Here is the code that deals with checking if all of the subsections are hidden:

if (($('fieldset.abstract > div > input:checkbox:checked').length+1) == 7){
    //Left Side
    $('.block > .abstract > .superseven > section input').each(function(){
        $(this).prop('checked' , true);
    });
    $('.block > .abstract > .superseven > section').eq(index).hide();  
    $('.block > .abstract').hide("slow");
    //Right Side
    $('fieldset.abstract label:first').toggleClass('hidden');
    $('fieldset.abstract > div > input').each(function(){
            $(this).prop('checked' , false);
    });
    $('fieldset.abstract > div > label').each(function(){
            $(this).hide("slow");
    });

How do I ‘reset’ the checkboxes to a page load, ONLY after all of the subsections were hidden? It should be that once the user clicks the right section header to bring the section back on the left, all of the subsections are visible.

• If I apply a regular condition ( similar to the lower section in the JS labeled //Toggle Section completely) when the right section header is clicked, it will not keep persistence from when only a few subsections are hidden and then the entire section.
• I was thinking that it might be possible if I keep track with a state variable, but dont know about variable scoping in Jquery (I would assume it would have to be global, which I am under the understanding that is not good practice),

• or this entire section of Jquery could be wrapped in a self calling function like this:

  (function name() { … })();

Any other programming approaches I might be able to use?

Sorry for the in-depthness, new to js/jquery, and I hope the fiddle helps, not hurts.

Clarification of what should happen:

• Click all of the left side subsections, and they disappear
• the right side subsections (labels only, as all checkboxes are not visible in live page) should disappear
• the right side section header should turn red
• click the right side section header
• the left side section should appear (all of this up to here is working, here is where it breaks) AND all subsections in the left should be visible, as if it were reset (the same as when the page loads, but only for this particular section, as there are multiple of these sections), as the user hid all of the subsection, so the entire section was hidden, and now the user wants the left section back, and all subsections should be visible.

Notes:

Current working functionality:

• hiding the entire section from the header
• hiding all but one of the subsections
• hiding subsections, then choosing to hide the entire section, and keeping persistance when unhiding the entire section

Answer 1

for the question of initial block, i think is a width issue, try to change some width, try 14.28 instead of 14.326647564469914, ( I respond via IPad and with this device work correctly )

To sum the comments, this code: reset the initial case and set the correctly width of sub section

if(!$('.block > .abstract').is(':visible')) {
      $('fieldset.abstract #abstract_all').prop('checked' , false);
      $('.superseven ').children().show();
      var width = ((1/7)*100);
      $('.superseven ').find('div').css("width", width + '%')