0

Здравствуйте. Сейчас работает вот так:

<a class="qr" id="toggler" onclick="facechange('#QR'); return false">Show Qr</a> <a class="qr" id="toggler" onclick="facechange('#rules'); return false">Read rules</a>

и

function facechange(objName) {
    if ($(objName).css('display') == 'none') {
        $(objName).animate({
            height: 'show'
        }, 400);
    } else {
        $(objName).animate({
            height: 'hide'
        }, 200);
    }
}

Все работает - все хорошо. Но вот вопрос. Как сделать, чтобы блок, который в данный момент открыт скрывался, если у нас открывается другой блок?

3
  • зачем используете onclick="" если у вас jquery ?
    – copist
    23 мая 2014 в 15:57
  • регистр для facechange() используете разный
    – copist
    23 мая 2014 в 15:58
  • параметр должен называться не objName а selector и он явно будет криво работать, если ему передать facechange('body')
    – copist
    23 мая 2014 в 15:59

1 ответ 1

1
<style>
.hidden { display: none; }
</style>

через data-area-id указывают ID блока, который надо показать

<a class="area-toggler" data-area-id="qr">Show Qr</a>
<a class="area-toggler" data-area-id="rules">Read rules</a>

классом hidden помечаю блоки, которые не видно
<div class="area hidden" id="qr">QR</div>
<div class="area hidden" id="rules">RULES</div>

<script type="text/javascript">
$(function(){
    $('a.area-toggler').on('click',function(){
            // найти все блоки, у которых нет класса hidden (то есть они видимые) и спрятать их
        $('div.area:not(.hidden)').animate({height: 'hide'}, 200).addClass('hidden');

            // после этого показать тот, который связан с кликнутой ссылкой и поставить ему класс "hidden" (то есть его теперь не видно)
    var areaId = $(this).data('area-id');
    $('#' + areaId).animate({height: 'show'}, 400).removeClass('hidden');
});
});
</script>
1
  • добавил комментарии - может так ответ понятнее
    – copist
    25 мая 2014 в 6:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.