Есть хороший сайт:
jquery.page2page.ru/index.php5/%D0%9F%D0%BE%D0%BE%...
там есть пример использования .toggle()
Первый вариант:
<!DOCTYPE html>
<html>
<head>
<style>
ul{margin:10px; list-style:inside circle; font-weight:bold;}
li{cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li>Пришел</li>
<li>Увидел</li>
<li>Победил</li>
<li>Расслабился</li>
<li>И отхватил...</li>
</ul>
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
</body>
</html>
Всё бы хорошо,но подобная конструкция почему то не срабатывает.Почему?
Вообще я хотел сделать что-то подобное:
<span class="first">paragraph#1</span>
<span class="second">paragraph#2</span>
.second{display:none;}
$('.first').toggle(
function(){
$('.second').css({'display':'inline'});
},
function(){
$('.second').css({'display':'none'});
}
);
по первому клику видимый, по второму нет(видимый должен быть disolay:inline)
codepen.io/ddimonn8080/pen/YwraLy 
