• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 580
  • Last Modified:

jQuery hiding/showing elements

Hi.

I have this code:

	var to_hide = jQuery(".prev_disableNextFields").parent();
	jQuery("<div id='prev_show_hide_fields'></div>").insertAfter(to_hide);
	to_hide = jQuery(to_hide).next().next();
	for(a=0; a<24; a=a+1){
			jQuery("#prev_show_hide_fields").append(to_hide);
			to_hide = jQuery(to_hide).parent().next();
	}

Open in new window


which is working ok to hide 8 controls I have in a form (every control has 3 DOM elements, so 8x3 = 24). However, I would like to hide all these 8 elements except the third, so I tryied something like this:

	var to_hide = jQuery(".prev_disableNextFields").parent();
	jQuery("<div id='prev_show_hide_fields'></div>").insertAfter(to_hide);
	to_hide = jQuery(to_hide).next().next();
	for(a=0; a<6; a=a+1){
			jQuery("#prev_show_hide_fields").append(to_hide);
			to_hide = jQuery(to_hide).parent().next();
	}
	for(a=0; a<3; a=a+1){
			to_hide = jQuery(to_hide).parent().next();
	}
	for(a=0; a<15; a=a+1){
			jQuery("#prev_show_hide_fields").append(to_hide);
			to_hide = jQuery(to_hide).parent().next();
	}

Open in new window


But this doesn't work (it just hides first 2 elements, instead of all elements except third). What I'm doing wrong ?

Thank you.
0
gplana
Asked:
gplana
  • 9
  • 5
  • 3
  • +1
1 Solution
 
Julian HansenCommented:
Question is there a reason you can't give the controls you want to hide a class and then just hide them using the class?

Script seems a bit round about for what you are doing - maybe post what it is you are trying to do.

I probably missed the point of what you are doing but would this not be a more simpler approach?

<div class="hideme"></div>
<div class="hidme"></div>
<div class="leavemealone"></div>
<script type="text/javascript">
jQuery(function() {
  jQuery('.hidem').hide();
});
</script>

Open in new window

0
 
gplanaAuthor Commented:
You are right, but the problem is that original html code is created by a Wordpress plugin. It's a little complicated to explain, but basically this html is created automatically, so I have to make some script code to alter this html for adding a CSS class, for example.
0
 
Rainer JeschorCommented:
Hi,
would it be possible to add a sample document to get the html structure?
Thanks.

KR
Rainer
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
gplanaAuthor Commented:
sure, you can go to http://absoluteme.co.uk/cosmetic-clinics/health-aesthetics-farnham/review

In there there is a checkbox with text "I only had a consultation" which hides all next elements until "I certify...". I would like also to keep visible "Inicial analysis and advice" element.
0
 
Julian HansenCommented:
Ok a couple of things,

What do you mean by a sample document?

Also if this is being created by a WordPress plugin then unless the plugin is providing something to get hold of then a CSS only solution is not going to work - you will probably need to look at a javascript solution to find the correct rows and find them.

But that is getting very complicated - a WP pluggin is just php code - adding / modifying it should be relatively straight forward.

Either way more information is needed - is the Plugin a public one or custom built - is it possible to see this thing in action?
0
 
JonNormanCommented:
Looking at the source I think that you want something like this:
jQuery("document").ready(function() {
    jQuery("#pods_form1_consultation").change(function() {
        to_hide = new Array();
        current = jQuery("#spacer_consultation");
        for (i = 0; i < 24; i++) {
            current = current.next();
            if (i < 6 || i>8) {
                to_hide.push(current);
            }
        }

        if (jQuery(this).is(":checked")) {
            jQuery(to_hide).fadeOut();
        } else {
            jQuery(to_hide).fadeIn();
        }
    });
});

Open in new window

Get rid of the bit that adds the elements you want hidden to a different div (you want to have some of the elements that would need to be in the div not hidden).
0
 
gplanaAuthor Commented:
Thank you very much. You are helping me alot.

I have added the code you suggested and something has been improved: but the "after" field is beign keept instead of "Initial analysis and advice".

Also, after check and uncheck the checkbox, all previously hidden items were tabbed to the right. Have I done anything wrong ?

You can see the updated code at the same URL.

Thanks.
0
 
gplanaAuthor Commented:
Any help ?
0
 
Julian HansenCommented:
Went to the URL - checked / unchecked box - could not see what you describe - looked fine to me. (Firefox)

What browser are you using?
0
 
gplanaAuthor Commented:
Thanks for your answer.

I'm using Firefox too. The problem is that field "Initial analysis and advice" disappears when you check the option "I only had a consultation" and we want to keep this field visible while hiding all the rest.
0
 
JonNormanCommented:
OK, it's just a case of working out which divs you need to hide and which you don't in the loop. Try this:
jQuery("document").ready(function() {
    jQuery("#pods_form1_consultation").change(function() {
        to_hide = new Array();
        current = jQuery("#spacer_consultation");
        for (i = 0; i < 24; i++) {
            current = current.next();
            if (jQuery(current).not(".Initial_analysis") && jQuery(current).not("#spacer_Initial_analysis")) {
                to_hide.push(current);
            }
        }

        if (jQuery(this).is(":checked")) {
            jQuery(to_hide).fadeOut();
        } else {
            jQuery(to_hide).fadeIn();
        }
    });
});

Open in new window

0
 
gplanaAuthor Commented:
Thanks for your reply. I have made the change you said (which in fact is only the if line inside the for) but it seems the same behaviour still stays.
0
 
JonNormanCommented:
The code has not been updated - you still have:
 jQuery(".prev_disableNextFields").live("change",function(){
if(jQuery(this).is(":checked")){
jQuery("#prev_show_hide_fields").fadeOut();
}else{
jQuery("#prev_show_hide_fields").fadeIn();
}
});
// We want to hide controls when user press "I only have consultation". We hide 2 controls (x3) after "I only have consultation" and then we show "analysis" and hide 5 more controls (until "I certify")
var to_hide = jQuery(".prev_disableNextFields").parent();
jQuery("<div id='prev_show_hide_fields'></div>").insertAfter(to_hide);
to_hide = jQuery(to_hide).next().next();
for(a=0; a<24; a=a+1){
jQuery("#prev_show_hide_fields").append(to_hide);
to_hide = jQuery(to_hide).parent().next();
}

Open in new window

In the js file - http://absoluteme.co.uk/wp-content/plugins/pods_review/prev_scripts.js?ver=3.3.1 and I cannot find the text #pods_form1_consultation anywhere in any script.

If you have a new url where the updated script is please post it. Thanks.
0
 
gplanaAuthor Commented:
New code is just below. I have commented the previous code, but then it doesn't work. I'm sure I'm doing something wrong, but I'm not understanding what.
0
 
JonNormanCommented:
What you have done wrong is that you have not commented out the previous code. Please make sure that the following code is commented out or deleted:
 jQuery(".prev_disableNextFields").live("change",function(){
if(jQuery(this).is(":checked")){
jQuery("#prev_show_hide_fields").fadeOut();
}else{
jQuery("#prev_show_hide_fields").fadeIn();
}
});
// We want to hide controls when user press "I only have consultation". We hide 2 controls (x3) after "I only have consultation" and then we show "analysis" and hide 5 more controls (until "I certify")
var to_hide = jQuery(".prev_disableNextFields").parent();
jQuery("<div id='prev_show_hide_fields'></div>").insertAfter(to_hide);
to_hide = jQuery(to_hide).next().next();
for(a=0; a<24; a=a+1){
jQuery("#prev_show_hide_fields").append(to_hide);
to_hide = jQuery(to_hide).parent().next();
}

Open in new window

I know that this is happening as the <div id='prev_show_hide_fields'> is appearing on the page.
0
 
gplanaAuthor Commented:
I commented all the above code, but now the problem is that when I check the checkbox "I only had a consultatino" nothing happens: any of the fields is shown.

I'm stuck...
0
 
JonNormanCommented:
hmmm, that's rather weird, the not is not behaving itself in this circumstance. I have changed it to checking is() and have also changed it so that it doesn't need to remember an array of elements to hide:
jQuery("#pods_form1_consultation").change(function() {
        current = jQuery("#spacer_consultation");
        for (i = 0; i < 24; i++) {
            current = current.next();
            if (!current.is(".Initial_analysis") && !current.is("#spacer_Initial_analysis")) {
                if (jQuery(this).is(":checked")) {
                    jQuery(current).fadeOut();
                }else{
                    jQuery(current).fadeIn();
                }
            }
        }
    });

Open in new window

I have tested this at: http://jsfiddle.net/JonNorman/KXVnH/ all seems to work ok
0
 
gplanaAuthor Commented:
Excellent help. Thank you very much.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 9
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now