Whats the proper way to move div to top?

Question

Got some custom input dropdown. After clicking on any of it it should place at first position and collapse others. But its puts .inputGroup outside of collapsible . How to prevent it?

  <div class="order-status" id="orderStatus">
                        <div class="order-status-selector" data-toggle="collapse" data-target="#order-status-list">

                        </div>
                        <div class="inputGroup">
                            <input id="confirmed" name="radio" type="radio" checked>
                            <label for="confirmed" class="confirmed">confirmed</label>
                        </div>
                        <div class="collapse" id="order-status-list">
                            <div class="inputGroup">
                                <input id="new" name="radio" type="radio">
                                <label for="new" class="new">new</label>
                            </div>
                            <div class="inputGroup">
                                <input id="paid" name="radio" type="radio">
                                <label for="paid" class="paid">paid</label>
                            </div>
                            <div class="inputGroup">
                                <input id="shipped" name="radio" type="radio">
                                <label for="shipped" class="shipped">shipped</label>
                            </div>
                            <div class="inputGroup">
                                <input id="fulfilled" name="radio" type="radio">
                                <label for="fulfilled" class="fulfilled">fulfilled</label>
                            </div>
                            <div class="inputGroup">
                                <input id="return" name="radio" type="radio">
                                <label for="return" class="return">return</label>
                            </div>
                            <div class="inputGroup">
                                <input id="deleteOrder" name="radio" type="radio">
                                <label for="deleteOrder" class="deleteOrder">delete</label>
                            </div>
                        </div>
                    </div>

$("#orderStatus .inputGroup").click(function () {
        $('#orderStatus').prepend($(this));
        $('#order-status-list').collapse("hide");
    });

    $(".order-status-selector").click(function () {
        $(this).toggleClass('rotated');
    });

Here is some jsFiddle .

Answer 1

Prepend the element to .collapse div.

$('#orderStatus .collapse').prepend($(this));

 $("#orderStatus .inputGroup").click(function() { $('#orderStatus .collapse').prepend($(this)); $('#order-status-list').collapse("hide"); }); $(".order-status-selector").click(function() { $(this).toggleClass('rotated'); }); 

 .order-status { display: flex; flex-direction: column; align-items: center; position: relative; background-color: #ccc; } .order-status .inputGroup input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; } .order-status .inputGroup label { width: 170px; padding: 8px 20px; display: block; text-transform: uppercase; font-weight: 600; text-align: left; cursor: pointer; position: relative; z-index: 2; transition: color 200ms ease-in; overflow: hidden; border-radius: 32.5px; color: #fff; margin-bottom: 10px; font-size: 11px; } .order-status-selector { position: absolute; top: 5px; right: 130px; width: 30px; height: 24px; border-left: 1px solid rgba(255, 255, 255, 0.3); z-index: 9; } .order-status-selector:hover { cursor: pointer; } .order-status-selector:after { content: url('https://api.iconify.design/simple-line-icons:arrow-down.svg?height=16&inline=true&color=%23fff'); border: none; position: absolute; top: 3px; right: 0; width: 16px; height: 16px; z-index: 9; transition: transform 0.3s ease-in-out; } .rotated.order-status-selector:after { transform: rotateX(180deg); } .order-status .confirmed, .order-status.confirmed { background-color: #39ccd2; } .order-status .new, .order-status.new { background-color: #7db9fd; } .order-status .paid, .order-status.paid { background-color: #f978ff; } .order-status .shipped, .order-status.shipped { background-color: #7fc637; } .order-status .fulfilled, .order-status.fulfilled { background-color: #057568; } .order-status .return, .order-status.return { background-color: #d0021b; } .order-status .deleteOrder, .order-status.deleteOrder { background-color: #282f36; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="order-status" id="orderStatus"> <div class="order-status-selector" data-toggle="collapse" data-target="#order-status-list"> </div> <div class="inputGroup"> <input id="confirmed" name="radio" type="radio" checked> <label for="confirmed" class="confirmed">confirmed</label> </div> <div class="collapse" id="order-status-list"> <div class="inputGroup"> <input id="new" name="radio" type="radio"> <label for="new" class="new">new</label> </div> <div class="inputGroup"> <input id="paid" name="radio" type="radio"> <label for="paid" class="paid">paid</label> </div> <div class="inputGroup"> <input id="shipped" name="radio" type="radio"> <label for="shipped" class="shipped">shipped</label> </div> <div class="inputGroup"> <input id="fulfilled" name="radio" type="radio"> <label for="fulfilled" class="fulfilled">fulfilled</label> </div> <div class="inputGroup"> <input id="return" name="radio" type="radio"> <label for="return" class="return">return</label> </div> <div class="inputGroup"> <input id="deleteOrder" name="radio" type="radio"> <label for="deleteOrder" class="deleteOrder">delete</label> </div> </div> </div> 

Answer 2

First, remove the visible input-group and add this to order-status-list before inserting the select one.

JSFiddle

You can see here-

 $("#orderStatus .inputGroup").click(function() { $('#order-status-list').append($('#orderStatus > .inputGroup')); $(this).insertAfter($('.order-status-selector')); $('#order-status-list').collapse("hide"); }); $(".order-status-selector").click(function() { $(this).toggleClass('rotated'); }); 

 .order-status { display: flex; flex-direction: column; align-items: center; position: relative; background-color: #ccc; } .order-status .inputGroup input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; } .order-status .inputGroup label { width: 170px; padding: 8px 20px; display: block; text-transform: uppercase; font-weight: 600; text-align: left; cursor: pointer; position: relative; z-index: 2; transition: color 200ms ease-in; overflow: hidden; border-radius: 32.5px; color: #fff; margin-bottom: 10px; font-size: 11px; } .order-status-selector { position: absolute; top: 5px; right: 130px; width: 30px; height: 24px; border-left: 1px solid rgba(255, 255, 255, 0.3); z-index: 9; } .order-status-selector:hover { cursor: pointer; } .order-status-selector:after { content: url('https://api.iconify.design/simple-line-icons:arrow-down.svg?height=16&inline=true&color=%23fff'); border: none; position: absolute; top: 3px; right: 0; width: 16px; height: 16px; z-index: 9; transition: transform 0.3s ease-in-out; } .rotated.order-status-selector:after { transform: rotateX(180deg); } .order-status .confirmed, .order-status.confirmed { background-color: #39ccd2; } .order-status .new, .order-status.new { background-color: #7db9fd; } .order-status .paid, .order-status.paid { background-color: #f978ff; } .order-status .shipped, .order-status.shipped { background-color: #7fc637; } .order-status .fulfilled, .order-status.fulfilled { background-color: #057568; } .order-status .return, .order-status.return { background-color: #d0021b; } .order-status .deleteOrder, .order-status.deleteOrder { background-color: #282f36; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="order-status" id="orderStatus"> <div class="order-status-selector" data-toggle="collapse" data-target="#order-status-list"> </div> <div class="inputGroup"> <input id="confirmed" name="radio" type="radio" checked> <label for="confirmed" class="confirmed">confirmed</label> </div> <div class="collapse" id="order-status-list"> <div class="inputGroup"> <input id="new" name="radio" type="radio"> <label for="new" class="new">new</label> </div> <div class="inputGroup"> <input id="paid" name="radio" type="radio"> <label for="paid" class="paid">paid</label> </div> <div class="inputGroup"> <input id="shipped" name="radio" type="radio"> <label for="shipped" class="shipped">shipped</label> </div> <div class="inputGroup"> <input id="fulfilled" name="radio" type="radio"> <label for="fulfilled" class="fulfilled">fulfilled</label> </div> <div class="inputGroup"> <input id="return" name="radio" type="radio"> <label for="return" class="return">return</label> </div> <div class="inputGroup"> <input id="deleteOrder" name="radio" type="radio"> <label for="deleteOrder" class="deleteOrder">delete</label> </div> </div> </div> 

Answer 3

You can use this function

$("#orderStatus .inputGroup").click(function () {
    $('#orderStatus .collapse').prepend(this);
    $('#order-status-list').collapse("hide");
});

$(".order-status-selector").click(function () {
    $(this).toggleClass('rotated');
});

$('#order-status-list').on('hide.bs.collapse', function() {
  $(".order-status-selector").toggleClass('rotated');
})