<div id="accordion" style="margin: -530px 0 0 -110px;"> 
    <div class="item">
      <a href="#">Раздел 1</a>
      <p>
      Lorem ipsum nec ex prompta tractatos.
      Ea elit sale admodum vim, at velit nemore rationibus per.
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei.
      Mel legere mucius ne, adhuc impetus signiferumque cu eos.
      Has an zzril soluta impetus.
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 2</a>
      <p>
      Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 3</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 4</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
  </div>

<style>

#accordion .item {
    width: 250px;
    height: 30px;
    overflow: hidden;
     
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
     
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
     
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
</style>

<ul class="tabs">
    <li class="active"><a href="#tab1">Новости</a></li>
    <li><a href="#tab2">Администрация</a></li>
    <li><a href="#tab3">Обновления</a></li>
</ul>
      <div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<div class="post-box">
        <div class="post-content">
        <table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="display: block; text-align: center"><span style="font-family: Impact">Рады Вас приветствовать на ролевом проекте "Don`t lie"</span><br>Тематика нашей ролевой базируется на событиях комиксов и фильмов MARVEL, также на мотивах скандинавской мифологии. <br>Мы имеем альтернативный сюжет и индивидуальные цепочки квестов для каждого персонажа. <br>Мы принимаем ВСЕХ персонажей вселенной MARVEL и разношерстных не канонов. <br>Возможно создание персонажа-животного.</span></p></td><td><p><img class="postimg" src="http://s7.uploads.ru/t/Kosdt.gif" alt="http://s7.uploads.ru/t/Kosdt.gif"></p></td><td><p><span style="font-size: 16px"><span style="display: block; text-align: center"><span style="font-family: Impact"><span style="color: green">Нужные ссылки : </span></span><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=12" rel="nofollow" target="_blank">Правила</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=4" rel="nofollow" target="_blank">Способности</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=32#p82" rel="nofollow" target="_blank">Акции</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/viewtopic.php?id=31#p124" rel="nofollow" target="_blank">Сюжетквесты</a><br><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/register.php" rel="nofollow" target="_blank">Самое важное</a></span></span></p></td></tr></tbody></table>
        </div>
</div>
                               
</div>
<div style="display: none;" id="tab2" class="tab_content">
<div class="post-box">
        <div class="post-content">
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=2" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Himera Lucescere</span></span></a> <span style="font-family: Lucida Console">- создатель, гл.админ, по сути своей беззлобное,но строгое существо. Обожает, выдумывать безумные квесты.<br>По всем вопросом обращать к ней. Единственные человек, которые понимает в чем суть сюжета.</span><br>Связь: <a href="http://lokirol.rusff.ru/click.php?http://vk.com/id108073628" rel="nofollow" target="_blank">ВКонтакте</a><br></p>
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=4" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Кэт</span></span></a> <span style="font-family: Lucida Console">- юный энтузиаст,активно помогает на форуме, хороший советчик. Смекает в графических кодах и дизайне.</span><br><span style="font-family: Lucida Console">Связь:</span>  <a href="http://lokirol.rusff.ru/click.php?http://vk.com/id213095366" rel="nofollow" target="_blank">Вконтакте</a></p>
        <p><a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/profile.php?id=7" rel="nofollow" target="_blank"><span style="font-family: Impact"><span style="color: green">Thor Odinson</span></span></a> <span style="font-family: Lucida Console">- единственный серьезный человек на форме в настоящее время. Да, это тот герой, который разобрал раздел "Способности" и акцию. Благодарим за проделанную работу)<br></span></p>
        <p>Связь: <a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/messages.php?action=new&uid=7" rel="nofollow" target="_blank">ЛС</a></p>
        </div>
</div>
                               
</div>
<div style="display: none;" id="tab3" class="tab_content"> 

<div class="post-box">
        <div class="post-content">
        <table style="table-layout:fixed;width:100%"><tbody><tr><td><p><span style="font-family: Lucida Console"><strong><span style="display: block; text-align: center">Всегда и везде</span> </strong></span><br><span style="display: block; text-align: center">Мы постарались оптимизировать работу нашего форума через иные гаджеты, например телефоны, планшеты, нетбуки.<br>Мы справляемся с проблемой маленьких экранов, теперь любой блок форума <strong>можно свернуть</strong>, вплоть до категорий.<br>Для это кликните на иконку справа от категорийблоков.<br></span></p></td><td><p><span style="display: block; text-align: center"><span style="font-family: Lucida Console"><span style="font-size: 14px"><strong>Награды</strong></span></span><br>На форуме функционирует ряд новых наград, уже имеется первый награжденный)<br>Спешите оценить их красоту и постарайтесь заполучить одну из <a href="http://lokirol.rusff.ru/click.php?http://lokirol.rusff.ru/mod/awards/" rel="nofollow" target="_blank">них</a> </span></p></td></tr></tbody></table>
        </div>
</div>
</div>
      </div>



<div id="accordion" style="margin: -230px 0 0 -270px;"> 
    <div class="item">
      <a href="#">Раздел 1</a>
      <p>
      Lorem ipsum nec ex prompta tractatos.
      Ea elit sale admodum vim, at velit nemore rationibus per.
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei.
      Mel legere mucius ne, adhuc impetus signiferumque cu eos.
      Has an zzril soluta impetus.
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 2</a>
      <p>
      Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 3</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
    <div class="item">
      <a href="#">Раздел 4</a>
      <p>Lorem ipsum nec ex prompta tractatos. 
      Ea elit sale admodum vim, at velit nemore rationibus per. 
      Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. 
      Mel legere mucius ne, adhuc impetus signiferumque cu eos. 
      Has an zzril soluta impetus. 
      An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.
      </p>
    </div>
  </div>

<style>

#accordion .item {
    width: 250px;
    height: 30px;
    overflow: hidden;
     
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
     
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
     
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
</style>