Untitled

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo</title>
<script src="lib/jquery.js"></script>
<body>
    <style>
        .element {
            background: #555;
            padding: 5px;
            border-radius: 2px;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            width: 100px;
            border: 1px solid steelBlue;
            margin-top: 10px;
            position: static;
        }
        .wrap:hover {
            opacity: 0.9;
        }
        .block {
            background: #ccc;
            border-radius: 5px;
            color: #000;
            font-size: 12px;
            padding: 5px;
            #opacity: 0;
            width: 250px;
            position: absolute;
            left: 160px;
            #top: 38px;
            height: 160px;
            display: none;
        }
        .block textarea {
            max-width: 240px;
            min-width: 240px;
            border-radius: 3px;
            min-height: 120px;
            max-height: 120px;
        }
        .block .saveBtn {
            float: left;
        }
        .block .closeBtn {
            float: right;
        }
        #content {
            width: 500px;
            background: #ebebeb;
            padding: 20px;
            border: 1px solid steelBlue;
        }
    </style>
    <script>
        $(document).ready(function() {
            showBlock();
            hideBlock();
        });

        function showBlock() {
            $('.element').click(function() {
                $(this).next().fadeIn('medium');
            });
        }

        function hideBlock() {
            $('.closeBtn').click(function() {
                $(this).parent().fadeOut('medium');
            });
        }
    </script>
    <div id="content">

            <div class="element">Button 1</div>
            <div class="block" style="top:38px">
                <textarea></textarea>
                <button class="saveBtn">Save</button>
                <button class="closeBtn">Close</button>
            </div>

            <div class="element">Button 2</div>
            <div class="block" style="top:78px">
                <textarea></textarea>
                <button class="saveBtn">Save</button>
                <button class="closeBtn">Close</button>
            </div>

            <div class="element">Button 3</div>
            <div class="block" style="top:118px">
                <textarea></textarea>
                <button class="saveBtn">Save</button>
                <button class="closeBtn">Close</button>
            </div>

    </div>
</body>
</html>