CODEWITHSUNDEEP
javascriptjquery
zigojacko
zigojacko

Reputation: 2053

Close other divs when new one opened with jQuery fadeToggle

I've got three buttons in line with one another and when clicked, they expand a form below.

When a form has already been expanded however, clicking on one of the other buttons, does not collapse the previous form (it just expands that form above the previous).

The below code is the markup currently in place to handle this but I'm unsure on how to extend fadeToggle to collapse other forms each time a button is clicked.

I'll await answers but I'm guessing I'm going to need to add a class to the divs that contain the forms so that we can trigger a close event on click?

<section class="cta-buttons">
    <script>jQuery(document).ready(function(){jQuery("#callback").click(function () {jQuery("#callback-form").fadeToggle();});});</script>
    <div id="callback"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>

    <script>jQuery(document).ready(function(){jQuery("#enquiry").click(function () {jQuery("#enquiry-form").fadeToggle();});});</script>
    <div id="enquiry"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>

    <script>jQuery(document).ready(function(){jQuery("#booknow").click(function () {jQuery("#booknow-form").fadeToggle();});});</script>
    <div id="booknow"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>

    <?php // FORMS TRIGGERED ON CLICK ?>
    <div id="callback-form" style="display: none;"><?php vfb_pro( 'id=1' ); ?></div>
    <div id="enquiry-form" style="display: none;"><?php vfb_pro( 'id=2' ); ?></div>
    <div id="booknow-form" style="display: none;"><?php vfb_pro( 'id=3' ); ?></div>
</section>

Upvotes: 1

Views: 1151

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You should use class attributes to group common elements, and DOM traversal within the functions bound to them to create common logic and adhere to DRY principles. With that in mind, try this:

<section class="cta-buttons">
    <div id="callback" class="trigger" data-rel="#callback-form"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>
    <div id="enquiry" class="trigger" data-rel="#enquiry-form"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>
    <div id="booknow" class="trigger" data-rel="#booknow-form"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>

    <?php // FORMS TRIGGERED ON CLICK ?>
    <div id="callback-form" class="form-container"><?php vfb_pro( 'id=1' ); ?></div>
    <div id="enquiry-form" class="form-container"><?php vfb_pro( 'id=2' ); ?></div>
    <div id="booknow-form" class="form-container"><?php vfb_pro( 'id=3' ); ?></div>
</section>

.form-container {
    display: none;
} 

$(function() {
    $('.trigger').click(function() {
        $('.form-container').fadeOut();
        $($(this).data('rel')).fadeIn();
    });
});

To stop the currently shown form, fading out and in again try this:

$('.trigger').click(function () {
    var currentId = '#' + $('.form-container:visible').prop('id');
    var newId = $(this).data('rel');
    $('.form-container').fadeOut();
    if (currentId != newId) {
        $(newId).fadeIn();
    }
});

Example fiddle

Upvotes: 1

Nico
Nico

Reputation: 890

I would add a class to all forms (for example ".formHidden").

Then, each time you click a form, you do

jQuery("#enquiry").click(function () {
    jQuery("#enquiry-form").fadeToggle();
    jQuery("#enquiry-form").removeClass("formHidden")
         .siblings().addClass("formHidden");
});

(this code is, of course, just for the first one. You need to replicate it on the other ones). And, of course, you need to apply the appropriate css display:none to the ".formHidden" class.

EDIT:

A much cleaner approach:

<section class="cta-buttons">
    <div id="callbacks">
        <div id="callback"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>
        <div id="enquiry"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>
        <div id="booknow"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>
    </div>

    <div id="formcallbacks">
        <?php // FORMS TRIGGERED ON CLICK ?>
        <div id="callback-form" style="display: none;"><?php vfb_pro( 'id=1' ); ?></div>
        <div id="enquiry-form" style="display: none;"><?php vfb_pro( 'id=2' ); ?></div>
        <div id="booknow-form" style="display: none;"><?php vfb_pro( 'id=3' ); ?></div>
    </div>
</section>

And then

jQuery("#callbacks > div").click(function () {
    jQuery("#" + $(this).attr("id") + "-form").fadeIn()
         .siblings().fadeOut();
});

Supposing the <form> elements are the only children inside the parent div!

CHECK THIS JSFIDDLE: (http://jsfiddle.net/h7H5H/5)

Upvotes: 0

Related Questions