$(".acc:first-child h6").addClass('active'); $(".acc:first-child .answer").addClass('active'); $(".acc:first-child").addClass('active'); $(".acc h6").click( function () { if ($(this).hasClass('active')) { $(this).next().slideUp(function () { $(this).parent().find(".active").removeClass('active'); $(this).parent(".acc.active").removeClass('active'); }); } else { $(this).parent().siblings().removeClass('active'); $(this).parent().siblings().find(".active").removeClass('active'); $(this).parent().siblings().find(".answer").slideUp(300); $(this).parent().siblings().find(".answer").removeClass("open"); $(this).addClass('active'); $(this).parent(".acc").addClass('active'); $(this).next().addClass("open").slideDown(300); } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter