jQuery - Foldout Dropdown

by freedawirl

HTML

<div class="options clearfix">
    <div class="left">
        <div class="dropdown_container">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10px" height="10px">
                <polygon points="0,0 10,0 5,7.5" fill="white"></polygon>
            </svg>
            	<h5 class="selected">
                                Newest                            </h5>

            <div class="dropdown">
                <ul>
                    <li> <a href="/forum/impaired-driving/popular-most">
                                                    Most Popular                                                </a>

                    </li>
                    <li> <a href="/forum/impaired-driving/popular-least">
                                                    Least Popular                                                </a>

                    </li>
                    <li> <a href="/forum/impaired-driving/oldest">
                                                    Oldest                                                </a>

                    </li>
                    <li> <a href="/forum/impaired-driving/comments-most">
                                                    Most Comments                                                </a>

                    </li>
                    <li> <a href="/forum/impaired-driving/comments-least">
                                                    Least Comments                                                </a>

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

CSS

/* =============================================================================
   		FORUM Main
   ========================================================================== */
 #forum .post_excerpts > .options {
    margin-bottom:30px;
}
#forum.main .post_excerpts > .options .dropdown_container {
    width:250px;
}
#forum.main .post_excerpts > .options .right .std_button {
    width:180px;
}
/*** Selections!! ***/
 .dropdown_container {
    position:relative;
    background:#1c1c1c;
    width:295px;
    margin:3px 0 10px;
    z-index:10;
    perspective:1000px;
}
.dropdown_container * {
    color:#fff;
    cursor:pointer;
}
.dropdown_container svg {
    position:absolute;
    right:10px;
    top:12px;
    z-index:2;
}
.dropdown_container .selected {
    line-height:34px;
    padding:0 10px;
    z-index:1;
margin:0;}
.dropdown_container .dropdown {
    position:absolute;
    width:100%;
    background:#1c1c1c;
    z-index:0;
    zoom:1;
    filter:alpha(opacity=0);
    opacity:0;
    -webkit-transform:scale(1, 1) rotateX(91deg);
    -moz-transform:scale(1, 1) rotateX(91deg);
    -ms-transform:scale(1, 1) rotateX(91deg);
    -o-transform:scale(1, 1) rotateX(91deg);
    transform:scale(1, 1) rotateX(91deg);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:center top;
    -moz-transform-origin:center top;
    -ms-transform-origin:center top;
    -o-transform-origin:center top;
    transform-origin:center top;
    -webkit-transition:-webkit-transform 0.25s ease, opacity 0s ease 0.3s;
    -moz-transition:-moz-transform 0.25s ease, opacity 0s ease 0.3s;
    -ms-transition:-ms-transform 0.25s ease, opacity 0s ease 0.3s;
    -o-transition:-o-transform 0.25s ease, opacity 0s ease 0.3s;
    transition:transform 0.25s ease, opacity 0s ease 0.3s;
}
.dropdown_container .dropdown.open {
   ...

JavaScript

$(document).ready(function () {

    $(function () {
        $('a[href*=#]:not([href=#])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 750);
                    return false;
                }
            }
        });
    });

    $('.dropdown_container').click(function () {
        $(this).find('.dropdown').toggleClass('open');
    });

    $('.edit_post').click(function () {
        var postId = $(this).attr('data-id');
        postEditModal(postId);
    });

    $(".flag_post").click(function () {
        var postId = $(this).attr('data-id');
        $("#flag_post .yes").attr('data-id', postId);
        $("#flag_post .options").show();
        $("#flag_post .contents").html("Are you sure you want<br />to flag this post?");
        $("#flag_post").bPopup();
    });

    $("body").on("click", ".flag_comment", function () {
        var commentId = $(this).attr('data-id');
        $("#flag_comment .yes").attr('data-id', commentId);
        $("#flag_comment .options").show();
        $("#flag_comment .contents").html("Are you sure you want<br />to flag this comment?");
        $("#flag_comment").bPopup();
    });

    $("#flag_post .yes").click(function () {
        var postId = $(this).attr('data-id');
        $.ajax({
            type: 'POST',
            data: {
                id: postId
            },
            url: '/api/forum/flagpost',
            success: function (json) {
                if (json.status == 1) {
                    $("#flag_post .options").hide();
                    $("#flag_post .contents").html(json.message);
                   ...