Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Swap The Position Of All Content Inside Div Using A Check Box

Post a Comment
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:

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"