Using Checkbox To Swap The Position Of Content Inside Div Element
Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B
Solution 1:
If you simply want to invert the position of the two elements you can simply use flex reverse.
Obviously this will only be applicable if you don't want to maintain the background of the initial boxes.
This will be much faster to process than rebuilding the dom.
$(function() {
cbToggleFields();
});
$('#example1').off('change').on('change', function() {
cbToggleFields();
});
function cbToggleFields() {
if ($('#example1').is(':checked')) {
$('#rowA').addClass('reverse');
} else {
$('#rowA').removeClass('reverse');
}
}#rowA{
display:flex;
flex-direction:row;
justify-content:left;
/*For vertical alignment*/
/*flex-direction:column;*/
}
#rowA.reverse{
flex-direction:row-reverse;
/*flex-direction:column-reverse;*/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
<div id="rowA" class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content A</span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span><br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>Solution 2:
I recommend using the .click jquery Event Listener to as I have done below. Then I used .html() to get the contents of the div and to swap the contents.
$('#example1').click(function() {
var conta = $('#conta').html();
var contb = $('#contb').html();
$('#conta').html(contb);
$('#contb').html(conta);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
</body>Solution 3:
Using pure javascript here, use value to get the value of the input and swap the content around.
You can even make the function work with different types by adding another paramter to the swap_content function. function swap_content(conta, contb, type = 'input'){} now it will work with divs and inputs.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>You can use the same function to swap different elements around.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
function swap_items() {
swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTML
swap_content('inp1', 'inp2'); // swap items using value for input
}<div id="conta"><p>I will be displayed on second place on dropdown's particular value</p></div>
<div id="contb"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>
<input type="text" id="inp1" value="Will be placed second" />
<input type="text" id="inp2" value="Will be placed first" />
<button onclick="swap_items();">Swap content</button>Solution 4:
As you are using bootstrap, why not take advantage of the column ordering feature ? This way it is only a matter of changing class names.
This assume you are using both on the same row (as in your example).
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
Post a Comment for "Using Checkbox To Swap The Position Of Content Inside Div Element"