• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 583
  • 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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