Good morning, I'm finishing a website here for the company where I work, and only one detail is missing to complete it, however as my knowledge in javascript is somewhat limited, I would like a little help ... My question is the following , I found on the internet a dynamic FAQ made with a javascript concordion that works as follows:
Javascript code:
jQuery(document).ready(function($){
var MqM= 768,
MqL = 1024;
var faqsSections = $('.cd-faq-group'),
faqTrigger = $('.cd-faq-trigger'),
faqsContainer = $('.cd-faq-items'),
faqsCategoriesContainer = $('.cd-faq-categories'),
faqsCategories = faqsCategoriesContainer.find('a'),
closeFaqsContainer = $('.cd-close-panel');
//select a faq section
faqsCategories.on('click', function(event){
event.preventDefault();
var selectedHref = $(this).attr('href'),
target= $(selectedHref);
if( $(window).width() < MqM) {
faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
closeFaqsContainer.addClass('move-left');
$('body').addClass('cd-overlay');
} else {
$('body,html').animate({ 'scrollTop': target.offset().top - 130}, 200);
}
});
//Fecha a o faq painel
$('body').bind('click touchstart', function(event){
if( $(event.target).is('body.cd-overlay') || $(event.target).is('.cd-close-panel')) {
closePanel(event);
}
});
faqsContainer.on('swiperight', function(event){
closePanel(event);
});
//Mostra o conteúdo clicado
faqTrigger.on('click', function(event){
event.preventDefault();
$(this).next('.cd-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
});
//Atualiza a barra da categoria enquanto rolava
$(window).on('scroll', function(){
if ( $(window).width() > MqL ) {
(!window.requestAnimationFrame) ? updateCategory() : window.requestAnimationFrame(updateCategory);
}
});
$(window).on('resize', function(){
if($(window).width() <= MqL) {
faqsCategoriesContainer.removeClass('is-fixed').css({
'-moz-transform': 'translateY(0)',
'-webkit-transform': 'translateY(0)',
'-ms-transform': 'translateY(0)',
'-o-transform': 'translateY(0)',
'transform': 'translateY(0)',
});
}
if( faqsCategoriesContainer.hasClass('is-fixed') ) {
faqsCategoriesContainer.css({
'left': faqsContainer.offset().left,
});
}
});
function closePanel(e) {
e.preventDefault();
faqsContainer.removeClass('slide-in').find('li').show();
closeFaqsContainer.removeClass('move-left');
$('body').removeClass('cd-overlay');
}
function updateCategory(){
updateCategoryPosition();
updateSelectedCategory();
}
function updateCategoryPosition() {
var top = $('.cd-faq').offset().top,
height = jQuery('.cd-faq').height() - jQuery('.cd-faq-categories').height(),
margin = 20;
if( top - margin <= $(window).scrollTop() && top - margin + height > $(window).scrollTop() ) {
var leftValue = faqsCategoriesContainer.offset().left,
widthValue = faqsCategoriesContainer.width();
faqsCategoriesContainer.addClass('is-fixed').css({
'left': leftValue,
'top': margin,
'-moz-transform': 'translateZ(0)',
'-webkit-transform': 'translateZ(0)',
'-ms-transform': 'translateZ(0)',
'-o-transform': 'translateZ(0)',
'transform': 'translateZ(0)',
});
} else if( top - margin + height <= $(window).scrollTop()) {
var delta = top - margin + height - $(window).scrollTop();
faqsCategoriesContainer.css({
'-moz-transform': 'translateZ(0) translateY('+delta+'px)',
'-webkit-transform': 'translateZ(0) translateY('+delta+'px)',
'-ms-transform': 'translateZ(0) translateY('+delta+'px)',
'-o-transform': 'translateZ(0) translateY('+delta+'px)',
'transform': 'translateZ(0) translateY('+delta+'px)',
});
} else {
faqsCategoriesContainer.removeClass('is-fixed').css({
'left': 0,
'top': 0,
});
}
}
function updateSelectedCategory() {
faqsSections.each(function(){
var actual = $(this),
margin = parseInt($('.cd-faq-title').eq(1).css('marginTop').replace('px', '')),
activeCategory = $('.cd-faq-categories a[href="#'+actual.attr('id')+'"]'),
topSection = (activeCategory.parent('li').is(':first-child')) ? 0 : Math.round(actual.offset().top);
if ( ( topSection - 20 <= $(window).scrollTop() ) && ( Math.round(actual.offset().top) + actual.height() + margin - 20 > $(window).scrollTop() ) ) {
activeCategory.addClass('selected');
}else {
activeCategory.removeClass('selected');
}
});
}
});
The event I needed was that by clicking on a question, the other automatically closed ...
Can anyone clarify my question?
A big hug.