What I want to do is to make a 3x3grid with bootstrap 'col-md-4' elements. Every grid element has a button. When a button is clicked in a grid element, that grid element expands to size 12
Is there a easy way to make something like this image . I mean force the next 'col-md-4' item to moved to an empty space above col-md-12 in top row (if there is space).
html:
<div id="functions" class="row">
<div id="funkcja1" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f1</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja2" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f2</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div> </div>
<div id="funkcja3" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f3</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja4" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f4</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja5" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f5</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div>
</div>
<div id="funkcja6" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f6</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div> </div>
<div id="funkcja7" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f7</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div> </div>
<div id="funkcja8" class="function_item funkcja col-md-4">
<div class="function_inside">
<p>f8</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div> </div>
<div id="funkcja9" class="function_item col-md-4">
<div class="function_inside">
<p>f9</p>
<button class="sidebar-hide-btn" type="button">more</button>
</div> </div>
</div>
js:
jQuery(document).ready(function( $ ){
$(".btn").click(function() {
$('#functions').children().not('select').removeClass('col-md-12');
$('#functions').children().not('select').addClass('col-md-4');
$(this).closest('.function_item').removeClass('col-md-4').addClass('col-md-12');
});});
These jQuery functions can be useful:
.insertBefore()
.detach()
.prepend()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.