Закрывайте другие div, когда новый открывается с помощью jQuery fadeToggle

У меня три кнопки в ряд друг с другом, и при нажатии они раскрывают форму ниже.

Однако, когда форма уже развернута, нажатие на одну из других кнопок не разрушает предыдущую форму (она просто расширяет эту форму над предыдущей).

Приведенный ниже код представляет собой разметку, используемую в настоящее время для обработки этого, но я не уверен, как расширить fadeToggle для свертывания других форм при каждом нажатии кнопки.

Я буду ждать ответов, но я предполагаю, что мне нужно будет добавить класс в div, который содержит формы, чтобы мы могли инициировать событие закрытия при нажатии?

<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>
Источник

2 ответа

Решение

Вы должны использовать class атрибуты для группировки общих элементов и обход DOM внутри связанных с ними функций, чтобы создать общую логику и придерживаться принципов DRY. Имея это в виду, попробуйте это:

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

Чтобы остановить отображаемую в данный момент форму, исчезнуть и снова попробуйте это:

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

Пример скрипки

Источник

Я бы добавил класс для всех форм (например, ".formHidden").

Затем каждый раз, когда вы нажимаете на форму, вы делаете

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

(Этот код, конечно, только для первого. Вам нужно скопировать его на другие). И, конечно же, вам нужно применить соответствующие CSS display:none к классу ".formHidden".

РЕДАКТИРОВАТЬ:

Гораздо чище подход: 

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

А потом

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

Предположим, <form> элементы являются единственными дочерними элементами внутри родительского div!

ПРОВЕРЬТЕ ЭТО JSFIDDLE: ( http://jsfiddle.net/h7H5H/5)

Источник
Другие вопросы по тегам