Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>if you use iframe it will take time to call to server and page load and as request goes higher so it won't remain efficient too use jquery to show hide here is an example of mine</p> <pre><code>$(function(){ $('.tabbox_1').show(); $('.tab').click(function(){ var tabid = $(this).attr('id').replace('tab_',''); $('.tab').removeClass('active'); $(this).addClass('active'); if($('.tabbox_'+tabid).is(':visible')){ $('.tabbox').hide(); } $('.tabbox_'+tabid).fadeIn(); }); }); </code></pre> <p>Then there is html code for div</p> <pre><code>&lt;div&gt; &lt;ul class="tabpan"&gt; &lt;li class="tab" id="tab_1"&gt;One&lt;/li&gt; &lt;li class="tab" id="tab_2"&gt;One&lt;/li&gt; &lt;li class="tab" id="tab_3"&gt;One&lt;/li&gt; &lt;/ul&gt; &lt;div&gt; &lt;div class="tabbox tabbox_1"&gt; tab 1 content &lt;/div&gt; &lt;div class="tabbox tabbox_2"&gt; tab 2 content &lt;/div&gt; &lt;div class="tabbox tabbox_3"&gt; tab 3 content &lt;/div&gt; &lt;/div&gt; </code></pre> <p>dont forget style</p> <pre><code>&lt;style&gt; .tabbox{display:none} .tabpan li{float:left;padding:5px;background:#ddd;color:#fff;font-weight:bold;border:1px solid #ddd} .tabpan .active{background:#fff;color:#ddd;border:1px solid #ddd} &lt;/style&gt; </code></pre> <p>Hope this works for you</p> <p>If you still want to stick with iframe and radio button there is a css code which i have tried with two images it works you can change that background image on check of radio button</p> <pre><code>.checkbox_wrapper{position: relative;width:45px;height:101px;margin:10px auto;} .checkbox_wrapper input[type="checkbox"] {opacity:0;width:45px;height:101px;position: absolute;top: 0;left: 0;z-index: 2;} .checkbox_wrapper input[type="checkbox"] + label{background:url('../imgs/off.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;position: absolute;top: 0;left: 0;z-index: 1;} .checkbox_wrapper input[type="checkbox"]:checked + label{background:url('../imgs/onn.png') no-repeat;width:45px;height:101px;display:inline-block;padding: 0 0 0 0px;} </code></pre> <p>here is the html code use your images for check and uncheck and yes there is one onother css class for horizontal representation. Its very random so forgive me if you find mistake</p> <pre><code>.checkbox_wrapper{float:left;margin:4px;} &lt;div class="checkbox_wrapper"&gt; &lt;input type="checkbox" id="chk_btn" /&gt; &lt;label&gt;&lt;/label&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload