Swap The Position Of All Content Inside Div Using A Check Box
Solution 1:
Only the input values change because that's all your code attempts to work with (text_id1 and text_id2).
You had the right idea, but you really just need to swap the contents of div id="conta" and div id="contb", but only form-field elements have a value property. div elements have either the .textContent property (for getting/setting just the text within the element) or the .innerHTML property (for getting/setting text that contains HTML that needs to be parsed).
Lastly, don't use inline HTML event attributes, such as onclick. There are a bunch of reasons not to use this 25+ year old technique. Instead, do all your event binding in JavaScript - separate from your HTML.
// Get reference to the checkbox and set up click event handlervar cb = document.getElementById("example1").addEventListener("click", swap_content);
// Store references to the two div elementsvar conta = document.getElementById("conta");
var contb = document.getElementById("contb");
functionswap_content() {
// Non-form field elements don't have .value, they have .innerHTMLvar tmp = conta.innerHTML;
conta.innerHTML = contb.innerHTML;
contb.innerHTML = tmp;
}<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" ><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" ><linkhref="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" ><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><scriptsrc="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script></body>Solution 2:
You can try this:
functionswap_content(conta, contb) {
var contentA = document.getElementById(conta).innerHTML;
document.getElementById(conta).innerHTML = document.getElementById(contb).innerHTML;
document.getElementById(contb).innerHTML = contentA;
}
Note: You need to pass the id's of div which contents you are willing to swap.
Change onlick function to onclick="swap_content('conta','contb')"
Post a Comment for "Swap The Position Of All Content Inside Div Using A Check Box"