Показать сообщение отдельно
  #1 (permalink)  
Старый 25.10.2013, 15:18
Интересующийся
Отправить личное сообщение для Maxsl_89 Посмотреть профиль Найти все сообщения от Maxsl_89
 
Регистрация: 14.10.2013
Сообщений: 12

Помогите сделать так чтоб по клику открывалось и по клику же закрывалось
Помогите, прошу)
При клике на ссылку показывается определенный блок., но окрывается и сразу же закрывается. Помогите сделать так чтоб по клику открывалось и по клику же закрывалось или кнопку "свернуть" добавить.
<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');
        };
    });
});



Есть еще вариант сделать этот текст всплывющим окном, так даже лучше будет.
Буду очень благодарен.
Ответить с цитированием