JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion_state">
    <h4 class="address">State</h4>
    <div style="display:none;" class="state_wrap">
        <ul class="videostateId">
            <li value="">---Select State---</li>
            <li value="9">Andhra Pradesh</li>
            <li value="17">Arunachal Pradesh</li>
            <li value="14">Assam</li>
            <li value="13">Bihar</li>
            <li value="18">Chhattisgarh</li>
            <li value="4">Delhi</li>
            <li value="27">Goa</li>
            <li value="29">Gujarat</li>
            <li value="7">Haryana</li>
        </ul>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.accordion_state h4 {
    background-color: #929497;
    border: 1px solid #939598;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font-size: 10px;
    padding: 5px;
    text-align: center;
    width: 90%;
}
.address {
    border-bottom: 1px solid #929497;
    float: left;
    width: 98%;
    z-index: 0;
}
h4, h4 a {
    color: #929497;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.videostateId { float:left; clear:both}

JavaScript

$('h4').live('click',function() {
        $(this).next('div').slideToggle('fast');    
});

$(".videostateId li").click(function(){
          $('.address').html($(this).text()); //display selected text in h4
            $('.address').unbind('click'); //disable the click event
          $(this).siblings().hide();
      });