2016-09-09 2 views
-1

У меня есть событие click по трем ссылкам, которые показывают связанный раздел, но я хочу закрыть текущий раздел open при нажатии на другую ссылку и показать новый связанный раздел с анимацией slideToggle(). Какие-либо предложения? Благодаря!Простая Tablike функциональность с Javascript

// HTML 
    <ul> 
     <li><a id="privacy" href="#privacy-section">Privacy</a></li> 
     <li><a id="cookies" href="#cookies-section">Cookies</a></li> 
     <li><a id="imprint" href="#imprint-section">Imprint</a></li> 
    </ul> 

    <section id="privacy-section" class="privacy"> 
     Content… 
    </section> 
    <section id="cookies-section" class="cookies"> 
     Content… 
    </section> 
    <section id="imprint-section" class="imprint"> 
     Content… 
    </section> 

    // JS 
    $('#imprint, #privacy, #cookies').on('click', function(event) { 
     var target = $(this.getAttribute('href')); 
     target.slideToggle(); 

    if(target.length) { 
     event.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
     } 
    }); 
+0

Я думаю, что термин вы ищете является «гармошкой» – naththedeveloper

+0

вы ищете аккордеон, проверьте скрипку-клиент: //jsfiddle.net/FKAAM/4/ –

+0

Да спасибо - что Более уместен. – Lukas

ответ

0
// Footer Accordion 

$('#imprint, #privacy, #cookies').on('click', function(event) { 
var target = $(this.getAttribute('href')); 

if(target.hasClass('is-closed')) { 
    $('.is-open').addClass('is-closed').removeClass('is-open'); 
    target.removeClass('is-closed'); 
    target.addClass('is-open'); 
} 
else { 
    target.removeClass('is-open'); 
    target.addClass('is-closed'); 
} 

if(target.length) { 
    event.preventDefault(); 
    $('html, body').stop().animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
} 
});