JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div class="list">
        <div class="item"><a href="javascript: void(0);" class="okrug">Area 1</a>
        <div class="okrug_box">
        <form method="post" class="okrug_form">
            
            <div class="success" style="display: none;">New item is added.</div>
            
            <div class="label">Opština</div>

            <div class="field"><input type="text" id="opstina" name="opstina" /></div>
            
            <div class="clear"></div>
            
            <input type="hidden" name="oid" id="oid" value="2" />
            <input type="submit" value="Add" class="submit">
            
            <p><a href="javascript: void(0);" id="close">Close</a></p>
            
        </form>
        </div>

        </div>
    </div>
    
    <div class="list">
        <div class="item"><a href="javascript: void(0);" class="okrug">Area 2</a>
        <div class="okrug_box">

        <form method="post" class="okrug_form">
            
            <div class="success" style="display: none;">New item is added.</div>
            
            <div class="label">Opština</div>
            <div class="field"><input type="text" id="opstina" name="opstina" /></div>
            
            <div class="clear"></div>
            
            <input type="hidden" name="oid" id="oid" value="1" />
            <input type="submit" value="Add" class="submit">

            
            <p><a href="javascript: void(0);" id="close">Close</a></p>
            
        </form>
        </div>
        </div>
    </div>

CSS

.list {
    width: 753px;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #a8a8a8;
}

.list .item {
    width: 563px;
    float: left;
    text-indent: 5px;
    color: #1C1C1C;
    font-size: 13px;
}


.okrug_box {
    width: 450px;
    float: left;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    margin-top: 5px;
    background: #fff;
}

.okrug_box .label {
    width: 450px;
    margin-bottom: 5px;
    text-align: center;
}

.okrug_box .field {
    width: 450px;
    text-align: center;
}

.okrug_box .field input {
    width: 220px;
    border: 1px solid #000;
    border-radius: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.clear {
    width: 100%;
    clear: both;
    float: left;
    margin-bottom: 15px;
}

JavaScript

$(document).ready(function(){
    
    $('.okrug').click(function() {
 
        if($(this).next().is(':visible')) {
            $('div.okrug_box').slideUp('normal');
        } else {
            $('div.okrug_box').slideUp('normal');    
            $(this).next().slideDown('normal');
        }
    });
    
    $('a#close').click(function(){
        $('div.okrug_box').slideUp('normal');
    })

 
    //HIDE THE DIVS ON PAGE LOAD
    $("div.okrug_box").hide();
    
    $(".okrug_form").submit(function() {  
    // we want to store the values from the form input box, then send via ajax below  
    var opstina = $('#opstina').attr('value'); 
    var oid = $('#oid').attr('value');
    var part = $('#part').attr('value');
        $.ajax({  
            type: "POST",  
            url: "okrug.php",  
            data: "part="+ part +"&oid="+ oid +"&opstina="+ opstina,  
            success: function(){  
                $('div.success').fadeIn();
                setTimeout("$('div.success').fadeOut();", 6000);
            }  
        });  
    return false;  
    });  
});