jQuery hiding/showing elements

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>

Select allOpen in new window

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.

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

KR
Rainer

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.

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?

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();
        }
    });
});

Select allOpen 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).

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.

Any help ?

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

What browser are you using?

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.

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();
        }
    });
});

Select allOpen in new window

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.

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();
}

Select allOpen 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.

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.

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();
}

Select allOpen in new window

I know that this is happening as the <div id='prev_show_hide_fields'> is appearing on the page.

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

Excellent help. Thank you very much.