We help IT Professionals succeed at work.

jQuery hiding/showing elements

gplana
gplana asked
on
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.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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

CERTIFIED EXPERT

Author

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.
CERTIFIED EXPERT
Most Valuable Expert 2013
Awarded 2012

Commented:
Hi,
would it be possible to add a sample document to get the html structure?
Thanks.

KR
Rainer
CERTIFIED EXPERT

Author

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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?
Jon NormanInformation Systems Manager
CERTIFIED EXPERT
Top Expert 2012

Commented:
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).
CERTIFIED EXPERT

Author

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.
CERTIFIED EXPERT

Author

Commented:
Any help ?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Went to the URL - checked / unchecked box - could not see what you describe - looked fine to me. (Firefox)

What browser are you using?
CERTIFIED EXPERT

Author

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.
Jon NormanInformation Systems Manager
CERTIFIED EXPERT
Top Expert 2012

Commented:
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

CERTIFIED EXPERT

Author

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.
Jon NormanInformation Systems Manager
CERTIFIED EXPERT
Top Expert 2012

Commented:
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.
CERTIFIED EXPERT

Author

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.
Jon NormanInformation Systems Manager
CERTIFIED EXPERT
Top Expert 2012

Commented:
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.
CERTIFIED EXPERT

Author

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...
Information Systems Manager
CERTIFIED EXPERT
Top Expert 2012
Commented:
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
CERTIFIED EXPERT

Author

Commented:
Excellent help. Thank you very much.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.