Раскрывающийся список на jQuery

Создавая очередной проект, я задумался над эффективностью распределения контента на странице. Иногда охота, чтобы самые нужные материалы располагались в центре страницы. Но это не всегда осуществимо из за большого количества важной информации. К счастью, у меня родилась мысль о вставке так называемого "аккардиона" на jQuery. Как видно на рисунке, он представляет из себя заголовки, при нажатии на которых выводиться подзаголовок, или сама информация (как удобней). Это значительно экономит время и выглядит эффектно. Сам плагин на jQuery не прихотлив в установке. Первым делом мы подключим плагин самого jQuery и плагин самого списка, в стиле нашей страницы. А потом, разместим код списка в нашей html/php страничке. Ну обо всем по-порядку.

1. Этот стиль вставляем в "шапку" страницы, между тегами <head></head>
<script src="jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.accordion-1.2.2.source.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

2. Затем, вставляем сам список. Вставляем его между тегами <body></body>
<div class="pageContent">

<ul class="accordion">
<li>
<a href="#america">America</a>

<ul>
<li>
<a href="#america-newyork">New York</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
<li>
<a href="#america-sanfransisco">San Fransisco</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>

</li>
<li>
<a href="#america-washington">Washington</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
</ul>
</li>
<li>

<a href="#antarctica">Antarctica</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
<li>
<a href="#afroeuasia">Afro-Eurasia</a>
<ul>
<li class="current">

<a href="#afroeuasia-amsterdam">Amsterdam</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
<li>
<a href="#afroeuasia-paris">Paris</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>

</li>
<li>
<a class="#afroeuasia-stockholm">Stockholm</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
</ul>
</li>
<li>

<a href="#australia">Australia</a>
<ul>
<li>
<a href="#australia-melbourne">Melbourne</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
<li>

<a href="#australia-perth">Perth</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
<li>
<a href="#australia-sydney">Sydney</a>
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</li>
</ul>
</li>
<li>
<a href="http://www.google.com">Google</a>
</li>
</ul>

</div>
</div>




$(document).ready(function () {
$('ul').accordion();
});

// ]]>
</script>


3. Скачайте данные файлы и поместите их в корневую папку - там где находится сама страница с будущим эффектом.

После проделанных манипуляций, у тебя должен получиться такой красивый, разворачивающийся список. Желаю удачи в дизайнерском творчестве. Если что нибудь непонятно, пиши.
Если хочешь раскрутить блог, то тебе в этом поможет сайт "Я в блоге"