Форумы портала PHP.SU

CODE (html):
скопировать код в буфер обмена
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
    <script>
        $(document).ready(function () {
            $('.choose').click(function(){
                var target = $(this).attr('data-target');
                if($(this).hasClass('active')){
                    $(this).removeClass('active');
                    $('.'+target).slideUp('slow');
                }else{
                    $(this).addClass('active');
                    $('.'+target).slideDown('slow');
                }
            })
        });
    </script>
 
    <style>
        .main{
            width:500px;
            height:20px;
        }
        #b1{
            display:inline-block;
            width:100px;
            height:20px;
            border:1px solid #000;
            text-align:center;
            background-color:aqua;
        }
        #b2{
            margin-right:200px;
            width:100px;
            height:20px;
            border:1px solid #000;
            text-align:center;
            background-color:green;
            float:left;
        }
        .categories{
            width:150px;
            display:none;
            text-align:center;
            height: 50px;
            position:absolute;
            margin:150px 0 0 20px;
            background-color: deeppink;
        }
        .search{
            display:none;
            width:150px;
            text-align:center;
            height: 50px;
            position:absolute;
            margin:150px 0 0 350px;
            background-color:teal;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="choose" id="b1" data-target="search">ПОИСК</div>
    <div class="choose" id="b2" data-target="categories">КАТЕГОРИИ</div>
</div>
<div class="categories">Блок категорий</div>
<div class="search">Блок поиска</div>
</body>
</html>
 