1
I have 3 links with 3 contents associated with them, when I click on one of the links to div
with the corresponding content is displayed.
Case another div
that is not corresponding is already being displayed it is closed and the correct is opened, however the slideToggle
of jquery
is not making a uniform effect, if a div
"x" is open and I click to open the "y", instead of the slide always following from top to bottom it switches by doing the slide from bottom to top.
And if I click 2x on the same link a div
opens and closes quickly even having the toggle
defined.
$('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><a href="" 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 in pen code
First, you are giving error in your code. By setting the variable
contents
, you forgot to set it to the correct name$contents
. Second, if I understand correctly, you want us to toggle todiv
always appear by a way, from top to bottom, is that it? If it is not, explain better what you need.– Douglas Garrido