Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jake Bolton
Jake Bolton
1,956 Points
Posted by 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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.