JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

This is a <div class="dropdown">
            <a id="caletitle" class="dropdown_button">jan</a>
            <ul class="dropdown_content">
                <li>jan</li>
                <li>feb</li>
                <li>march</li>                                
                <li>april</li>                                
                 <li>may</li>    
            </ul>
        </div>

CSS

body, html { 
                padding: 0px; 
                margin: 0px; 
                font-size: 11px;
                font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
                color: #333;
                line-height: 1.28;
                text-align: left;
                direction: ltr;
                overflow: hidden;
            }
            b, a {
                color: #3b5998;
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }
            
            h2 {
                color: #3B5998;
                font-size: 18px;
                line-height: 24px;
                font-weight: bold;
            }
            
            .dropdown { 
                display: inline;
                margin-right: 3px;
                margin-left: 3px;
            }
            .dropdown .dropdown_button { 
                cursor: pointer;
                width: auto;
                display: inline-block;
                padding-left: 7px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-right: 22px;
                border: 1px solid #AAA;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                font-weight: bold;
                color: #717780;
                line-height: 16px;
                text-decoration: none !important;
                background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
            }
            .dropdown.open .dropdown_button {
                border: 1px solid #3B5998;
                color: white;
                background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
                -moz-border-radius-topleft: 2px;
                -moz-border-radius-topright: 2px;
                -moz-border-radius-bottomright: 0px;
              ...

JavaScript

$(function(){
                $('.dropdown').each(function(){
                    $(this).find('.dropdown_button').bind('click',function(){
                        if($(this).parent().hasClass('open')){
                            $(this).parent().removeClass('open');
                        }else{
                            $('.dropdown.open').removeClass('open');
                            var o = $(this).parent().find('.dropdown_button').offset();
                            var h = $(this).parent().find('.dropdown_button').height();
                            $(this).parent().find('.dropdown_content').css({'left':o.left});
                            $(this).parent().addClass('open');
                        }
                    });    
                });
                $('.dropdown li').each(function(){
                    $(this).bind('click',function(){  
                        $('.dropdown.open').removeClass('open');
                        var sd=$(this).text();
                       $("#caletitle").text(sd);
                    });
                });
                $(document).on('click', function(e) {
                    var $clicked = $(e.target);
                    if (!$clicked.parents().hasClass("dropdown")){
                        $('.dropdown.open').removeClass('open');
                    }
                });
            });