jQuery dropdown

by dhavaljani

HTML

<!-- custom classes-->
<div class="pmtDropdown">
                            <button class="btn faa fa-caret-down ui__clickDrop pmtDropdown__btn"><span class="ui__clickDrop--bigText">Visa ***3245 </span><span class="ui__clickDrop--sub-label"> Expires 07/2018</span>
                            <span class="ui__clickDrop--sub-label-block">Genesis Media</p>
                            </button><input type="hidden" value="" class="mehidden"/>
                                <ul class="pmtDropdown__menu">
                                    <li class="pmtDropdown__menu--item">
                                    <button class="ui__clickDropBtn" type="button" title="Visa1" ><span class="ui__clickDrop--bigText">Visa ***3245</span> <span class="ui__clickDrop--sub-label"> Expires 07/2018</span>
                                        <span class="ui__clickDrop--sub-label-block">Genesis Media</p>
                                    </button>
                                    </li>
                                    <li class="pmtDropdown__menu--item">
                                    <button class="ui__clickDropBtn" type="button" title="Visa2" ><span class="ui__clickDrop--bigText">Visa ***3245</span> <span class="ui__clickDrop--sub-label"> Expires 07/2018</span>
                                        <span class="ui__clickDrop--sub-label-block">Genesis Media</p>
                                    </button>
                                    </li>
                                    <li class="pmtDropdown__menu--item">
                                    <button class="ui__clickDropBtn" type="button" title="Paypal"><span class="ui__clickDrop--bigText">Paypal</span> <span class="ui__clickDrop--sub-label"></span>
                                        <span class="ui__clickDrop--sub-label-block">[email protected]</p>
                                    </button>
                                    </li>
                                    <li...

CSS

.pmtDropdown__menu {
    display: none;
}

JavaScript

$('.pmtDropdown__btn').click(function() {
    $('.pmtDropdown__menu').slideToggle(200).css('borderTop', 'none');
    $('.pmtDropdown__menu li').click(function() {
        $('.mehidden').val($(this).text());
        $('.pmtDropdown').text($(this).text());
        $('.pmtDropdown__menu').slideUp(200);
    });
});