jQuery toggle doesnt work

Question

I need it so when you click on the other toggle, the box currently open closes, so its basically impossible for them to be both open at the same time?

But the toggle doesnt work. https://jsfiddle.net/3gorcdra/1/

My JS Code look like this:

    $('.mix').next('.mix-content').hide();
$('.mix').click(function() {
    var el = $(this).next('.mix-content');
    var doit = (el.is(':visible')) ? el.slideUp() : ($('.mix-content').slideUp()) (el.slideDown());
});

I hope you guys can help me.

Answer 1

Try to use find() not next() since you are searching for descendant,

$('.mix').find('.mix-content').hide();
$('.mix').click(function() {
  var el = $(this).find('.mix-content');
  var doit = (el.is(':visible')) ? el.slideUp() : ($('.mix-content').slideUp(),el.slideDown());
});

DEMO

Also your css for mix-content is having position absolute. I changed it, because the accordion like behavior cannot be achieved like that.