Код:
<!--HTML-->
<center>
<div style="font-family: montserrat, serif; text-transform:uppercase; position:relative; top:40px; font-size:16px; line-height:100%; color:#5b6773;"><b>ВНЕУЧЕБНАЯ ДЕЯТЕЛЬНОСТЬ</b></div>
<center>
<div class="bsitxt3"><div class="yonetoheal"><div class="accordion vertical"><ul>

<br><br><br><br><br><br>
<li><input type="radio" id="radio-1" name="radio-accordion"><label for="radio-1">
ХОККЕЙНАЯ КОМАНДА «ВАНКУВЕРСКИЕ ГРИЗЛИ»
</label><div class="content"><div class="wohaowhe">
<div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Стоит напомнить, что хоккей - национальный вид спорта в Канаде. Поэтому отбор достаточно жесткий, ведь команда университета не первый год славиться не только нескончаемыми победами, но и образцовой дисциплиной. Университет предоставляет спортивную стипендию, всячески поощряя талантливых и молодых игроков. Именно эти ребята чаще получают места в основном составе. Однако, помимо стипендиатов, стать членом команды может каждый, что пройдет три этапа отбора : проверка физических возможностей, работа в команде и решение задач на логику. Так же, студенты могут быть исключены из команды по следующим пунктам : плохая успеваемость и недостойное поведение. 
В университете есть основной и запасной состав команды, который тренируется на равных условиях. </div>
<table>
<tr>
<td valign="top"><center><b>Тренерский состав: </b></center>
<br>Тренер команды : 
<br>Помощник тренера: 
<center><b>Основной состав команды: </b></center>
<br>Капитан: 
<br>Нападающие (2):  
<br>Защитники (2): <a href="http://canadium.rusff.ru/profile.php?id=54" target="_blank">Brandon Jenkins</a>
<br>Вратарь (1) : <br><br><br>
</td>
<td valign="top"><center><b>Запасной состав команды: </b></center>
<br>Со-капитан ( игрок запасного состава):  
<br>Нападающие (3): 
<br>Защитники (2): 
<br>Вратарь (1) : <br><br><br>
</td>
</tr>
</table></div></div></li>

<li><input type="radio" id="radio-2" name="radio-accordion" /><label for="radio-2">
ФУТБОЛЬНАЯ КОМАНДА «ВАНКУВЕРСКИЕ ГРИЗЛИ»
</label><div class="content"><div class="wohaowhe">
<div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Правила американского футбола и канадского очень схожи, что стирает интернациональную границу между этими видами спорта. Матч канадского футбола проводится согласно двум различным тактикам игры: нападению и защите. Ежеминутно одна из двух команд находится в фазе нападения, тогда как другая — в оборонительной фазе. Университет предоставляет стипендию и для этого вида спорта. Отбор в футбольную команду не столько жесткий, как в хоккейную.  Правила отбора остаются аналогичными, разве что исключением является то, что в футбольную команду можно пробоваться каждый год. В футбольной команде достаточно снисходительно смотрят на успеваемость, хотя и полного попустительства не позволяют (для студентов, которые прошли по спортивной стипендии, обязательными являются хорошие оценки). 
В университете есть основной состав, а так же пять (5) запасных игроков, являющихся универсальными. </div>
<center><b>Тренер: </b>   <a href="http://rippleeffect.rusff.ru/profile.php?id=46" target="_blank">Joshua McGuire</a><br>
<b>Капитан: <br>
</center>
<table>
<tr>
<td valign="top"><center><b>В нападении: </b></center>
<br>Центральный игрок  (1):
<br>Защитники (2):
<br>Блокирующие полузащитники  (2):
<br>Игроки на краю поля (2):
<br>Слотбеки  (2):
<br>Куортербек (1): <a href="http://canadium.rusff.ru/profile.php?id=26" target="_blank">Cody Wesker</a>
<br>Фулбек (1):
<br>Xавбек (1):
</td>
<td valign="top"><center><b>В защите:</b></center>
<br>Оборонительные полузащитники (3)
<br>Оборонительные крайние нападающие (2)
<br>Корнербеки (2)
<br>Лайнбекеры (2)
<br>Полузащитники (2)
<br>Сейфти (1)
<br>Запасные игроки (5):
</td>
</tr>
</table></div></div> </li>
<li><input type="radio" id="radio-3" name="radio-accordion" /><label for="radio-3">
ПЛАВАНЬЕ
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Команда по плаванью не является участником межуниверситетских соревнований, потому и отбор в нее достаточно простой. Сюда приходят так же те, кто просто хочет научиться уверенно держаться на воде. Соревнования между парнями и девушками проходят только на уровне университета. Попасть в команду можно дважды в год - начало учебного года и две недели после рождества. </div>
<center><b>Тренер:</b> <a href="http://rippleeffect.rusff.ru/profile.php?id=161" target="_blank">alexandra baker</a> </center>
<table>
<tr>
<td>Капитан: <br>
Пловцы (9):<br><a href="http://canadium.rusff.ru/profile.php?id=8" target="_blank">Alisha Wesker</a> <br>
</td>
</tr>
</table></div></div> </li>
<li><input type="radio" id="radio-4" name="radio-accordion" /> <label for="radio-4">
ГРУППА ПОДДЕРЖКИ
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Чирлидинг - достаточно популярный вид спорта, сочетающий в себе элементы шоу и гимнастики. Изначально, созданные для поддержания духа команды и развлечения зрителей между перерывами. Университетская группа поддержки смешанного типа, поэтому в нее могут попасть как девушки, так и молодые парни. Отбор проходит в один этап: проверка физических возможностей. И отбор проводит капитан группы поддержки, который избирается в конце каждого учебного года. </div>
<table>
<tr>
<td valign="top"><center><b>Тренер: </b> <a href="http://rippleeffect.rusff.ru/profile.php?id=76" target="_blank">kaya r. monroe</a></center>
<br>Капитан команды: <a href="http://canadium.rusff.ru/profile.php?id=6" target="_blank">Esther Watson</a>
<br>Участники :  
<br>Талисман команды :
</td>
</tr>
</table></div></div> </li>

<li><input type="radio" id="radio-5" name="radio-accordion" /> <label for="radio-5">
ДРАМКРУЖОК
</label><div class="content"><div class="wohaowhe">
<div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Вся жизнь — театр, а люди в нем — актеры. Такие же были слова великих? Университетский кружок драматического искусства предлагает придать вашей мечте очертания. Хотите блистать на сцене? Вам точно сюда. Прием неограничен и не имеет никаких критериев. Главное желание - вдохнуть жизнь в очередную историю. Драмкружок славиться своими "вольностями", отсюда редко [или вообще никогда ] исключают или прогоняют. Если ты ступил за порог зала репетиций, то ты уже "свой". </div><table>
<tr>
<td valign="top"><center><b>Руководитель : </center>
Студенты - актеры : <br> 

</tr></table></div></div> </li>

<li><input type="radio" id="radio-6" name="radio-accordion" /> <label for="radio-6">
ХУДОЖЕСТВЕННАЯ СТУДИЯ
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Уроки изобразительного искусства, преподаваемые в студии университета достаточно высоко уровня. Все дело в руководителе данного кружка. Работы студентов именно этого кружка украшают стены аудиторий и конференц - залов университетов. Так же, иногда студенты художественной студии рисуют что-то по заказу иных кружков. Стать участников студии совершенно просто - достаточно просто изъявить желание. В теплое время года, студенты уделяют особое внимание живописным местам вокруг университета. В художественном кружке достаточно строго с успеваемостью - это может стать причиной исключения.</div>
<table>
<tr>
<td valign="top"><center><b>Куратор : </b></center>
Студенты: <a href="http://canadium.rusff.ru/profile.php?id=32" target="_blank">Julia Bell</a> <br>
</td>
</tr></table></div></div> </li>

<li><input type="radio" id="radio-7" name="radio-accordion" /> <label for="radio-7">
МУЗЫКАЛЬНАЯ СТУДИЯ:
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">В данной студии не преподаются уроки игры на инструментах. Это, скорее, музыкальный класс с разрешением на вольное использование любых музыкальных инструментов. Именно здесь обосновываются студенты, которые создают свои небольшие группы. Особого куратора в данной студии нет. А дабы выступить на очередном университетском мероприятии, музыкальные группы подают заявку в студенческий совет. Здесь нет строгого учета, поэтому чаще всего именно здесь можно встретить прогуливающих пары студентов. Музыкальная студия открыта 24/7 и готова принять любого. </div>
<table><tr>
<td>
Студенты :<br>
<a href="http://canadium.rusff.ru/profile.php?id=35" target="_blank">Arthur Shepard</a> - вокалист<br>
<a href="http://canadium.rusff.ru/profile.php?id=65" target="_blank">Maryse Lefèvre</a> - сольный исполнитель<br></td>
</tr></table></div></div> </li>

<li><input type="radio" id="radio-8" name="radio-accordion" /> <label for="radio-8">
НАУЧНЫЙ КЛУБ
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Научный клуб разделен на несколько направлений : математика, химия, биология и физика. Одним из критериев вступления, является написание эссе на тридцать страниц на определенную тему в той отросли науки, в которую вы желаете окунуться с головой. Студенты клуба активно участвуют в межуниверситетских олимпиадах и занимают призовые места. Работа клуба жестко курируется университетским составом, а так же студенческим советом. Из клуба можно запросто "вылететь" из-за плохих оценок или недостойного поведения. Университет так же предоставляет научные стипендии, и обучение этих студентов контролируется на все сто процентов.  </div>
<table><tr>
<td valign="top"><center><b>Кураторы: </b> </center>
Студенты: <br>
</td>
</tr></table></div></div> </li>

<li><input type="radio" id="radio-9" name="radio-accordion" /> <label for="radio-9">
КНИЖНЫЙ КЛУБ
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Клуб, организованный студентами и курируется студенческим советом. Там же в него и можно записаться. Чаще всего собираются по субботам и воскресеньям в библиотеке, а по средам и пятницам - в кафе на территории университета. Читают стихи собственного сочинения и дискутируют о произведениях. Строгого учета участников клуба нет. Для желающих выступить, достаточно записаться в лист ( не более 10 человек на одно выступление), который находиться в комнате студенческого совета. Тесно сотрудничают со студенческой интернет - газетой. </div>
<table><tr>
<td >
Студенты:<br>
</td>
</tr></table></div></div> </li>

<li><input type="radio" id="radio-10" name="radio-accordion" /> <label for="radio-10">
СТУДЕНЧЕСКАЯ ИНТЕРНЕТ-ГАЗЕТА 
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Вестник, глас и око университета. Все новости, в том числе и сплетни, разносятся благодаря газете. Стать членом данного кружка непросто - нужна щепотка таланта, чутье на интересные вещи и умение быстро работать. Из "газеты" редко выгоняют за плохую успеваемость, и чаще всего из нее студенты уходят сами из-за раздоров в коллективе. Статьи тут сдаются в последний момент, хотя кого в этом стоит винить? Решение о принятии нового участника ложиться на куратора студенческой газеты </div>
<table><tr>
<td valign="top"><center><b>Куратор: <a href="http://canadium.rusff.ru/profile.php?id=59" target="_blank">Geneviève Corso</a> </b></center>
Главный редактор: <br>
Разработчик сайта: <br>
Репортеры: <a href="http://canadium.rusff.ru/profile.php?id=5" target="_blank">Alex Harrington</a>, <a href="http://canadium.rusff.ru/profile.php?id=4" target="_blank">Espen Bradshaw</a><br>
Фотографы: <a href="http://canadium.rusff.ru/profile.php?id=39" target="_blank">Max Calvert</a> <br>
</td>
</tr></table>

</div></div> </li>

<li><input type="radio" id="radio-11" name="radio-accordion" /> <label for="radio-11">
СТУДЕНЧЕСКОЕ РАДИО
</label><div class="content"><div class="wohaowhe"><table><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Вечные противники "газеты" за место под солнцем. Наполняют голосами и музыкой серые учебные будни, все университетские праздники и мероприятия. Так же, делают объявления и доносят до студентов необходимую информацию. Особых критериев отбора нет. Стать ведущим может каждый, однако если хоть раз пропускаешь время эфира - тебя исключают. Решение о принятии принимают всем коллективом.  </div>
<tr>
<td valign="top"><center>Куратор: </center>
<br>Студенты - ведущие: 
</td>
</tr></table></div></div></li>
<li><input type="radio" id="radio-12" name="radio-accordion" /> <label for="radio-12">
СТУДЕНЧЕСКИЙ СОВЕТ
</label><div class="content"><div class="wohaowhe"><div style="font-family: montserrat, serif;  position:relative; font-size:12px; line-height:100%; color:#5b6773;">Связующие звено между ректоратом и студентами. У студенческого совета достаточно обширные права : они могут увеличить бюджет того или иного кружка в разумных пределах. На время отстранять ребят от занятия в кружках, а так же занимаются назначением отработок. Однако, и ответственности и студенческого совета не меньше. Они обязаны контролировать успеваемость "стипендиатов", а так же предотвращать всяческие правонарушения. Контролировать работу клубов (радио, газеты) на предмет порочащей или неприличной информации. Стать членом студенческого совета по всему желанию нельзя. В Совет приглашают преподаватели.  </div>
<table><tr>
<td valign="top"><center><b>Куратор студенческого совета :</b> заместитель ректора </center>
<br>Глава студенческого совета:  
<br>Секретарь студенческого совета:  
<br>Члены студенческого совета : 

</td>
</tr></table></div></div></li>

</ul></div></div></div></center>

<style>
 .bsitxt3 {width: 500px;
 margin-top:-20px;
 background: url(http://41.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o5_250.png) repeat;
 }

.yonetoheal {width: auto;}
.accordion { width: auto; margin: 0 auto; padding: 10px;}
.accordion ul {list-style: none; margin: 0; padding: 0;   }
.accordion li {margin:0; padding:0; }
.accordion [type=radio], .accordion [type=checkbox] { display:none; }
.accordion label { display:block; background: #d2d2d4; font: 14px montserrat, serif; text-align: center; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; }
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { background:#d1d5de; letter-spacing: 2px;}
.accordion .content { padding: 0 10px; font: Times New Roman; overflow:hidden;  -webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out;}
.accordion p {  color:#a2a2a3; margin:0 0 10px; }
.accordion h3 { color:#b5b8b1; margin:10px 0;}
.vertical ul li {overflow:hidden; margin:0 0 1px; }
.vertical ul li label { padding:10px; }
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label { border-bottom:0; }
.vertical ul li .content { height:0px; border-top:0;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { height: 200px; background-color: #d1d5de; padding: 10px; opacity: 0.95;}
.wohaowhe {padding-right: 5px; height: 250px; overflow-y: auto; text-align: left;}
.wohaowhe::-webkit-scrollbar {width: 6px; height: 6px;}
.wohaowhe::-webkit-scrollbar-thumb {width: 6px}
</style>
Код:
КУДА -КЕМ
<a href="ссылка на профиль" target="_blank">имя анг.</a>