[Dilettante_Pro]

<style>
.tab-block{
    overflow: hidden;
    padding: 20px 0;
    background: #555;
    border: 1px solid #000;
}
.tab-left{
    float: left;
    width: 49%;
    text-align: center;
}
.tab-right{
    float: right;
    width: 49%;
    text-align: center;
}
#menu li span{
    color: #e31e24;
    font-size: 19px;
    font-family: 'Play', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #e31e24;
    border-radius: 10px;
}
.tab-block p{
    color: #fff;
}
ul#menu, ul#menu ul{
  list-style:none;
  margin: 0px;
  padding: 0px;
  -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
  -moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
}
ul#menu a,ul#menu span{
    text-decoration: none;
}
ul#menu li {
    margin-top: 1px;
}
ul#menu li a,ul#menu li span{
    padding: 7px;
    cursor: pointer;
}
ul#menu li ul li a{
  background: #eee;
  color: #000;
  padding-left: 20px;
}
ul#menu li ul li a:hover{
    background: #ddd;
}
.tab-block ul div{
    background: #888;
    border: 1px solid #000;
}

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#menu ul").hide();
   $("#menu li span").click(function() {
       $("#menu ul:visible").slideUp("normal");
       if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
           $(this).next().slideDown("normal");
       }
   });
   $('.btn-close').click(function() {
       $(this).parents('li').find('span').click();
   });
});
</script>
   <div class="tab-block">
        <ul id="menu">
            <li class="tab-left"><span>Сертификаты</span>
                <ul style="margin: 30px -105% 0 0;">
                    <div>
                      <a class="example-image-link" href="#" >1</a><br>
                      <a class="example-image-link" href="#" >2</a><br>
                      <a class="example-image-link" href="#" >3</a><br>
                      <a class="example-image-link" href="#" >4</a><br>
                      <a class="example-image-link" href="#" >5</a><br>
                      <a class="example-image-link" href="#" >6</a><br>
                      <button class='btn-close'>Close</button>
                    </div>
                </ul>
            </li>
            <li class="tab-right"><span>Благодарности</span>
                <ul style="margin: 30px 0 0 -100%;">
                    <div>
                      <a class="example-image-link" href="#" >11</a><br>
                      <a class="example-image-link" href="#" >22</a><br>
                      <a class="example-image-link" href="#" >33</a><br>
                      <a class="example-image-link" href="#" >44</a><br>
                      <a class="example-image-link" href="#" >55</a><br>
                      <a class="example-image-link" href="#" >66</a><br>
                      <button class='btn-close'>Close</button>
                    </div>
                </ul>
            </li>
        </ul>
    </div>