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();
});
functioncbToggleFields() {
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;*/
}<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="wrapper wrapper-content animated fadeInRight"><divid="rowA"class="row"><divclass="col-lg-5"id="conta"style="background: red;"><divclass="ibox "><divclass="ibox-title"><h5><inputtype="text"name="text_id1"id="text_id1"value="content A"></h5></div><divclass="ibox-body"><spanstyle="color:white">This is desc about Content A</span><br><imgsrc="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg"width="100px"height="100px"></div></div></div><divclass="col-lg-2"><divclass="ibox "><divclass="ibox-title"><divclass="switch"><divclass="onoffswitch"><inputtype="checkbox"class="onoffswitch-checkbox"id="example1"><labelclass="onoffswitch-label"for="example1"><spanclass="onoffswitch-inner"></span><spanclass="onoffswitch-switch"></span></label></div></div></div></div></div><divclass="col-lg-5"id="contb"style="background: blue"><divclass="ibox "><divclass="ibox-title"><h5><inputtype="text"name="text_id2"id="text_id2"value="content B"></h5></div><divclass="ibox-body"><spanstyle="color:white">This is desc about Content B</span><br><imgsrc="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);
});<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css"rel="stylesheet"><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css"rel="stylesheet"><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/style.css"rel="stylesheet"><body><divclass="wrapper wrapper-content animated fadeInRight"><divclass="row"><divclass="col-lg-5"id="conta"style="background: red;"><divclass="ibox "><divclass="ibox-title"><h5><inputtype="text"name="text_id1"id="text_id1"value="content A"></h5></div><divclass="ibox-body"><spanstyle="color:white">
This is desc about Content A </span><br><imgsrc="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg"width="100px"height="100px"></div></div></div><divclass="col-lg-2"><divclass="ibox "><divclass="ibox-title"><divclass="switch"><divclass="onoffswitch"><inputtype="checkbox"checkedclass="onoffswitch-checkbox"id="example1"><labelclass="onoffswitch-label"for="example1"><spanclass="onoffswitch-inner"></span><spanclass="onoffswitch-switch"></span></label></div></div></div></div></div><divclass="col-lg-5"id="contb"style="background: blue"><divclass="ibox "><divclass="ibox-title"><h5><inputtype="text"name="text_id2"id="text_id2"value="content B"></h5></div><divclass="ibox-body"><spanstyle="color:white">This is desc about Content B</span><br><imgsrc="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.
functionswap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputsvar 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;
}<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css"rel="stylesheet"><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css"rel="stylesheet"><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/style.css"rel="stylesheet"><body><divclass="wrapper wrapper-content animated fadeInRight"><divclass="row"><divclass="col-lg-5"id="conta"style="background: red;"><divclass="ibox "><divclass="ibox-title"><h5><inputtype="text"name="text_id1"id="text_id1"value="content A" ></h5></div><divclass="ibox-body"><spanstyle="color:white">
This is desc about Content A </span><br><imgsrc="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg"width="100px"height="100px"></div></div></div><divclass="col-lg-2"><divclass="ibox "><divclass="ibox-title"><divclass="switch"><divclass="onoffswitch"><inputtype="checkbox"checkedclass="onoffswitch-checkbox"id="example1"onclick="swap_content('text_id1','text_id2')"><labelclass="onoffswitch-label"for="example1"><spanclass="onoffswitch-inner"></span><spanclass="onoffswitch-switch"></span></label></div></div></div></div></div><divclass="col-lg-5"id="contb"style="background: blue"><divclass="ibox "><divclass="ibox-title"><h5><inputtype="text"name="text_id2"id="text_id2"value="content B" ></h5></div><divclass="ibox-body"><spanstyle="color:white">This is desc about Content B</span><br><imgsrc="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg"width="100px"height="100px"></div></div></div></div></div><scriptsrc="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.
functionswap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputsvar 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;
}
functionswap_items() {
swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTMLswap_content('inp1', 'inp2'); // swap items using value for input
}<divid="conta"><p>I will be displayed on second place on dropdown's particular value</p></div><divid="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><inputtype="text"id="inp1"value="Will be placed second" /><inputtype="text"id="inp2"value="Will be placed first" /><buttononclick="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"