Show/hide element children on click

by Marventus

HTML

<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
    <ul>
        <li>
            <a id="tweeter" href="" class="icon icon-twitter icon-twitter-1"><i>Twitter</i></a>
            <ul class="subicons">
                <li><a href="" target="_blank" class="twitter-one">Twitter 1</a></li>
                <li><a href="" target="_blank" class="twitter-two">Twitter 2</a></li>
                <li><a href="" target="_blank" class="twitter-three">Twittee 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<p style="margin-top:30px"><strong>Show on click, hide on blur:</strong></p>
<div class="socials click">
    <ul>
        <li>
            <a id="tweeter" href="" class="icon icon-twitter icon-twitter-2"><i >Twitter</i></a>
            <ul class="subicons">
                <li><a href="http://thegeekinvasion.com" target="_blank" class="twitter-one">Twitter 1</a></li>
                <li><a href="" target="_blank" class="twitter-two">Twitter 2</a></li>
                <li><a href="" target="_blank" class="twitter-three">Twittee 3</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

a.trigger {
    color:#000;
    cursor:pointer;
    display:block;
    margin-bottom:10px;
    text-decoration:none;
}
.subicons
/*, div.blur:blur p.twitter */
 {
    display:none;
}

JavaScript

$(document).ready(function () {
    $(".icon-twitter-1", this).on("click", function (e) {
        e.preventDefault();
        $(this).siblings(".subicons").toggle();
    });
    $(".icon-twitter-2").on({
        "click": function (e) {
            e.preventDefault();
            $(this).siblings(".subicons").show();
        },
            "blur": function () {
                $(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
            }
    });
});