I have 3 links with 3 content associated with them, when I click on one of the links div with the corresponding content is displayed.
If another non-matching% of% is already displayed, it closes and the correct one is opened, however, div of slideToggle is not making a uniform effect if a jquery "x" is open and I click to open the "y", instead of the slide always follow from top to bottom it alternates making the slide from bottom to top.
And if I click 2x on the same link the div opens and closes quickly even though div is set.
$('a').on('click', function(event) {
event.preventDefault();
var content = $(this).data('section');
var contents = $('.container .section');
$contents.each(function(index, el) {
if ($(el).is(':visible') && $(el).data('content') !== content) {
$(el).slideToggle('slow');
}
});
$('[data-content="'+content+'"]').slideToggle('slow');
}).container .section {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li><ahref="" data-section="1">Section 1</a></li>
<li><a href="" data-section="2">Section 2</a></li>
<li><a href="" data-section="3">Section 3</a></li>
</ul>
<div class="container">
<div class="section" data-content="1">
Section 1
</div>
<div class="section" data-content="2">
Section 2
</div>
<div class="section" data-content="3">
Section 3
</div>
</div>If you prefer, see also code pen