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 handler
var cb = document.getElementById("example1").addEventListener("click", swap_content);
// Store references to the two div elements
var conta = document.getElementById("conta");
var contb = document.getElementById("contb");
function swap_content() {
// Non-form field elements don't have .value, they have .innerHTML
var tmp = conta.innerHTML;
conta.innerHTML = contb.innerHTML;
contb.innerHTML = tmp;
}<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" >
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" >
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" >
<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>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>Solution 2:
You can try this:
function swap_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"