Помогите, прошу)
При клике на ссылку показывается определенный блок., но окрывается и сразу же закрывается. Помогите сделать так чтоб по клику открывалось и по клику же закрывалось или кнопку "свернуть" добавить.
<ul>
<li><a href="#" class="link01">Click me 01</a></li>
<li><a href="#" class="link02">Click me 02</a></li>
<li><a href="#" class="link03">Click me 03</a></li>
</ul>
<div class="div01">Блок номер 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita rerum ullam amet ipsam officiis voluptate dolores illo architecto unde omnis quia nesciunt harum a et cumque nam temporibus blanditiis.</div>
<div class="div02">Блок номер 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore omnis id rem quas recusandae commodi fugit alias voluptatem ipsam adipisci. Illum voluptatibus minus earum odio sint nostrum itaque tenetur expedita!</div>
<div class="div03">Блок номер 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi molestiae illum aut accusantium rerum et reprehenderit officiis distinctio dolor laboriosam. Quas adipisci quia corporis possimus voluptatem saepe maiores in suscipit.</div>
код CSS
div[class^=div]{
width:400px;
min-width: 400px;
padding:10px;
box-sizing:border-box;
display: none;
}
$(function() {
$('a[class^=link]').on('click', function () {
function clear () {
$('div[class^=div]').css({
display : 'none'
});
}
var $class = $(this).attr('class');
if($class == 'link01'){
clear();
$('.div01').toggle('drop');
} else if($class == 'link02'){
clear();
$('.div02').toggle('drop');
} else if($class == 'link03'){
clear();
$('.div03').toggle('drop');
};
});
});
Есть еще вариант сделать этот текст всплывющим окном, так даже лучше будет.
Буду очень благодарен.