Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


Jake Bolton
Jake Bolton
1,956 Points

Making a child div remain visible - jQuery

Hi all,

Basically I have a contact form on a site that is set to show/hide using jQuery.

'.slideContent' is the name of the div that is targeted by the JavaScript.

I'm completely new to jQuery but I've been trying to edit the following:

jQuery(document).ready(function ($) { $('.slideContent').hide(); $('.slideButton').click(function () { var $this = $(this); $(this).siblings('.slideContent').slideToggle(500, function () { $this.text($(this).is(':visible') ? 'Click to close' : 'Get in Touch'); }); }); });

I'm using contact form 7 and I want the output message from CF7 to display, but it's currently outputting to the .slideContent parent.

As .slideContent becomes hidden when CF7 reloads the page, the delivery notice is also hidden, which is confusing for the user.

Is there any way to tell the browser to make the child div '.wpcf7-response-output' to remain visible even though the parent div is hidden?

Hope someone can help.

Many thanks in advance. Jake B

1 Answer

Hi Jake,

Is this .slideContent div and the code you are showing here functionality that's built into CF7 or custom code that you have added?

You may need to show the html here.

I think I saw that this form is ajax enabled but you say that cf7 reloads the page and your form is hidden. Are you able to turn the ajax off so it does a full page reload?

My only suggestion right now would be to see about wrapping just the form elements with your .slideContent div so that the response div isn't included in that.