Develop Reference

Hide elements within tabs dynamically in jQuery

Before I developed a functionality for when you have only one set of tabs. Now the aApp is growing and that tabs functionality is failing since there are more sets of tabs.
The first time the function was like this:
var iconTabs = function () {
$('#icons-tabs a:not(:first)').addClass('inactive');
$('.icons-container').hide();
$('.icons-container:first').show();
$('#icons-tabs a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')) {
$('#icons-tabs a').addClass('inactive');
$(this).removeClass('inactive');
$('.icons-container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
};
And the html:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
Now the html has a second section and I still have to add 3 more, so now it is like this:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
<div id="fragment-2" class="fragments text-center">
<div class="icons-container" id="tab5C">
{{!-- Content --}}
</div>
<div class="icons-container" id="ta62C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
I have created a JSFiddle in case you want to play:
http://jsfiddle.net/ju3a9zx5/
My mission is to do it dynamic and that every set of tabs has separate behaviour. As you may see in the JSFiddle: the second set of tabs doesn't work, and I want them to have the same behaviour as the first one, but separate, one set of tabs don't have to interfere with the others.

You are going to want to use classes instead of ids to target your tabs. If you see my example below, there are only a few changes:
I replaced id="tabs" and id="tabs2" with class="tabs"
I changed the event handlers to target the class instead of the ids
When finding the related a tags I use siblings()
When finding the related .container I use .nextUntil() to find the container beneath in the DOM
When showing the initial container classes. I use $('.tabs').next('.container')
$(document).ready(function() {
$('.tabs a:not(:first)').addClass('inactive');
$('.container').hide();
$('.tabs').next('.container').show();
$('.tabs a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) { //this is the start of our condition
$(this).siblings('a').addClass('inactive');
$(this).removeClass('inactive');
$(this).parent().nextUntil(':not(.container)').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});
.tabs {
width: 100%;
height: 30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {
cursor: pointer;
}
.tabs a {
float: left;
list-style: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-right: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;
;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display: block;
background: #FFF;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-decoration: none;
outline: none;
}
.tabs a.inactive {
padding-top: 5px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
color: #666666;
background: #EEE;
outline: none;
border-bottom: solid 1px #CCC;
}
.tabs a:hover,
.tabs a.inactive:hover {
color: #5685bc;
outline: none;
}
.container {
clear: both;
width: 100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align: left;
padding-top: 20px;
}
.container h2 {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
color: #5685bc;
}
.container p {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.3;
font-size: small;
}
.container ul {
margin-left: 25px;
font-size: small;
line-height: 1.4;
list-style-type: disc;
}
.container li {
padding-bottom: 5px;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<a id="tab1">test1</a>
<a id="tab2">test2</a>
<a id="tab3">test3</a>
<a id="tab4">test4</a>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
<div class="tabs">
<a id="tab5">test1</a>
<a id="tab6">test2</a>
<a id="tab7">test3</a>
<a id="tab8">test4</a>
</div>
<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>

Ok played around with your fiddle. First remark: change id="tabs" to class="tabs", also change the selectors in your javascript and css. With that change it should get you up and running.
From a developer point of view I would create a jQuery plugin and throw the code in an each() function to make this even more flexible, better scalable and maintanable.

Click button expands the div horizontally by closing other two divs

Guys I am new to jQuery...please help me to learn this. I want to expand the div(#center) taking width:100% on click that in turn closes the other 2 divs (#left and #right) in my case.
Please someone help me to solve this. And the most imp thing is that the transition should be swift nd not at once. Reply is appreciated. And its not lyk i dint try it first. I tried using click function to make it happen..bt dint work as desired
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>

You can use this example for "tab2"
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
check my fiddle: http://jsfiddle.net/u87z1m3n/1/
And put id's to the li's in order to be able to select them:
<li id="tab1">Tab 1
</li>
<li id="tab2">Tab 2
</li>
<li id="tab3">Tab 3
</li>
The example is very coarse as the code needs a lot more refining...
But I think that it gives an answer to your question...

Study the example below. Let me know if you have any questions.
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});
body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>

Here's a CodePen demo showing the final result of everything below. Please read it carefully so you can learn the process and understand everything that's happening.
First of all, your HTML needed a lot of cleanup. You called head as an ID, but used it multiple times throughout your code. If you're going to use a selector more than once, it should be a class instead. I changed it in the HTML and the CSS.
HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
Next, in your CSS, you hadn't set the widths of your containers correctly, so adding something like width:100% wasn't doing anything because there was no max width to fill. I added that to your styles. Remember, I also updated the markup from changing your head id to a class.
Additionally, I removed the floats from you left,right, and center divs because that removes the blocks from the flow of the document, which can lead to funny behavior. Instead, I changed them to display:inline-block and set their widths relative to the container.
Finally, I added a .wide class at the end which will set the width of the center div.
CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
Now, this can be done with jQuery, so make sure you add the script in the head of your HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The jQuery script is pretty simple, and does three things:
1. When you click on any of the tab buttons, it will hide the #left and #right divs.
2. The #center div expands to 100% of the container.
3. When you click on the tab again, it will shrink the #center div and bring the other two back.
jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
I used toggle in both of the calls because it gives a fairly nice animation without making you code in specifics. It also handles adding or removing a class, so your script can stay simple if all you want to do is add or remove that class with each click.
If you want something more complex, you'll definitely want to look at JavaScript instead of jQuery as #Katana314 mentioned above. They're for two different things, so make sure you understand the difference between the two.

How to bring dragged div to top of everything while using two scrollers?

I have two horizontal scrollers and I need to drag div from upper scroller to lower scroller. This is working fine but the problem is that the dragged div gets lost under the scroller borders while dragged. Dragging comes from jquery-UI and scrollers smoothdivscroll.
Is there a way to fix it or should i start from scratch?
Here it is in http://jsfiddle.net/yCESP/
Here is list of jquery plugins.
jquery-ui-1.10.4.custom.min.js
jquery.mousewheel.min.js
jquery.kinetic.min.js
jquery.smoothdivscroll-1.3-min.js
jquery.ui.touch-punch.min.js
Here is code
HTML
<div id="wrapper">
<div id="mainColumn">
<div id="mixedContent2" >
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>1</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>2</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>3</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>4</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>5</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>6</p>
</div>
<div class="koko_koira" style="background-color:#4254a3;color:white;">
<br/>
<p>7<br></p>
</div>
</div>
<div id="mixedContent" >
<div class="contentBox" style="background-color:#4254a3;color:white;">
<br/>
<p>FIRST</p>
</div>
<div class="contentBox" style="background-color:white;color:black;">
<p>SECOND</p>
</div>
<div class="contentBox" style="background-color:grey;color:white;">
<p>THIRD</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
z-index:0;
}
#mainColumn {
z-index:0;
}
#mixedContent {
width:80%;
height: 330px;
position: relative;
display: block;
z-index:1;
border:2px;
border-style:solid;
border-color:#093;
}
#mixedContent .contentBox {
position: relative;
float: left;
display: block;
height: 250px;
width: 250px;
border: solid 1px #ccc;
padding: 10px;
margin: 0px 5px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:5px 5px 5px 5px;
box-shadow: 2px 2px 2px #585858;
z-index:0;
}
#mixedContent .contentBox img {
margin-bottom: 10px;
}
#mixedContent .contentBox p {
font-size: 10px;
}
#mixedContent2 {
width:80%;
height: 330px;
position: relative;
display: block;
z-index:1;
border:2px;
border-style:solid;
border-color:#06C;
}
.koko_koira {
position: relative;
float: left;
display: block;
height: 200px;
width: 128px;
border: solid 1px #ccc;
padding: 10px;
margin: 0px 5px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:5px 5px 5px 5px;
box-shadow: 2px 2px 2px #585858;
z-index:50;
}
.koko_koira img {
margin-bottom: 10px;
}
JS
$(document).ready(function() {
$("#mixedContent").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true
});
});
$(document).ready(function() {
$("#mixedContent2").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true
});
});
$( ".koko_koira" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
});
$( ".contentBox" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

You should play with overflow: hidden and overflow: visible on div.scrollWrapper during drag/drop events. You also need to rethink the way you're positioning your top scrollers.
An updated fiddle (which sadly breaks up layout on drag event) can be found here.
Drag events to listen to while dragging:
drag: function() {
$('div.scrollWrapper').css('overflow', 'visible');
},
stop: function() {
$('div.scrollWrapper').css('overflow', 'hidden');
}

Facebook like popover setting menu jquery and css

I am preparing a menu facebook style. I encode is running smoothly. But when I click the drop-down menu remains open in other userposts.
I want to get a diverse menu of each post. not associated with each other. What do I need it to be?
This is demo jsfiddle
HTML CODE:
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
CSS code:
.container {
float:left;
width:500px;
height:90px;
border:1px solid #000;
margin-top:30px;
}
.pay_ayar {
float:right;
width:20px;
height:25px;
border:1px solid #000;
display:none;
}
.container:hover .pay_ayar{
display:block;
}
a.account{
position:absolute;
line-height:25px;
width:20px;
height:25px;
cursor:pointer;
display:block;
}
.bubble{
float:left;
position:relative;
width:250px;
height:200px;
padding:0px;
border:1px solid #000;
margin-top:0px;
display:none;
margin-left:-230px;
top:25px;
}
.pay_ayar.open .account {
cursor: pointer;
width: 20px;
height:25px;
display: inline-block;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.pay_ayar.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
and Javascript code:
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".pay_ayar").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".pay_ayar").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.pay_ayar').hasClass('open'))
{
$('.pay_ayar').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});

You have to get the current user target. You can get this with the user click event:
http://jsfiddle.net/pu7NQ/13/
$(".account").click(function(event)
{
var $container = $(event.target).closest(".container");
if($(".bubble", $container).css('display')=='none')
{
$(".pay_ayar", $container).addClass('open');
$(".bubble", $container).css('display','block');
}
else
{
$(".bubble", $container).css('display','none');
$(".pay_ayar", $container).removeClass('open');
}
});
This sure could be more elegant, but you get the idea.
If you want to close one element, on click outside, you will have to add a event listener to the document and listen, if the event was outside of the desired element. There is a plugin for that: http://benalman.com/projects/jquery-outside-events-plugin/
// add close listener
$container.on("clickoutside.outside",function(){
$(".pay_ayar").removeClass("open");
$(".bubble").hide();
$(this).off("clickoutside.outside");
});
Demo: http://jsfiddle.net/pu7NQ/16/
You should really consider, adding a close/open function to get rid of the code duplication.

Hidden checkbox appears (correctly) when button is pressed, but doesn't dissappear when pressed again

This is really strange. Anything else (button, dropdown etc.) works with this method, but not checkboxes. In my code, a button appears, and when I press it, the checkbox becomes visible. But when I press it again, the checkbox doesn't dissappear. I figured out that if I remove a line, the code seems to work (but the text is not float:left, which I need). How could I solve this problem so that my formatting stays correct? This is the line that needs to be removed:
input[type=checkbox] {margin: 5px; float:left; }
This is my whole code:
<!DOCTYPE html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
hidden0001{display:none}
</style>
<style>
</style>
<style id="Styles">
label { margin: 1px; padding: 0px; float:right;}
html { margin: 0px; padding: 0px; }
body {margin: 0px; padding: 0px;}
p.left { text-align: left; margin: 0px;}
.image {margin: 5px;}
.headertext {margin: 5px; margin-left: 5px; margin-right: 5px; }
.draggable { width: auto; height: auto; position: absolute;}
input[type=text] {margin: 5px;}
input[type=button] {margin: 5px;}
input[type=checkbox] {margin: 5px; float:left; }
input[type=file] {margin: 0px;}
span {margin: 5px;}
textarea {margin: 5px;}
select {margin: 5px;}
.tablink {float:left; margin: 5px;}
.ui-tabs {height:40px; vertical-align: central; margin: 2px;}
.mainheader {margin: 5px;vertical-align: central; padding: 0px; }
#TabBox {background-color:#fff;padding: 0px;}
.check { clear: both; float: left; display: block; }
.ui-tooltip {z-index:10;font-size:0.875em;margin-left:5px;
color:#fff;background-color: #000000;font-family: 'Droid Sans', sans-serif;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; position: absolute;padding: 5px;
border:2px solid blue;}
.tab_box {width:800px; height:400px; position: relative; }
</style>
</head>
<body style="cursor: auto; ">
<div style="width:100%;height:auto;">
<center>
<div class="maincontainer" style="display: block; ">
<div id="Builder" style="display: block; opacity: 1; ">
<div id="Main">
<div class="mainheader changeheader" style="width: 800px; ">
</div>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="width: 800px; display: none; ">
<div id="tablinks">
</div>
</div>
<div id="TabBox" style="width: 800px; ">
<div class="Elements-0 tab_box" id="containment-wrapper-0" style="display: block; ">
<div id="draggable_1" class="draggable ui-widget-content ui-draggable" style="left: 30px; top: 60px; ">
<input type="button" value="PUSH THIS BUTTON" class="btn " onclick="ubot.runScript('runthis()')">
</div>
<div id="draggable_2" class="draggable ui-widget-content ui-draggable" style="left: 242px; top: 64px; ">
<hidden0001>
<input type="checkbox" id="CheckBox_2" variable="#chbox" fillwith="checked">
<label for="CheckBox_2" style="padding-top:1px;">This is a checkbox</label>
</hidden0001>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
<!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js">
</script>
<script>
//Get current tab ID / Switch Tabs
$(".tablink").live("click", function() {
currentTabID = $(this).attr('id');
$(".tablink").css("border-bottom", "2px inset #000");
$(".tab" + currentTabID).css("border-bottom", "");
$(".tab_box").hide();
$("#containment-wrapper-" + currentTabID).show();
drag();
});
$(function () {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(document).tooltip();
});
</script>
<script>
$(document).ready(function(){
$("#draggable_1").click(function(){
$("hidden0001").toggle();
});
});
</script>
</body>
</html>
Thank you for any help, I truly appreciate your work, guys!
All the best,
Jones

I think you got a problem making your own tags where is the checkbox.
<hidden0001>....</hidden0001>
Just change this for a known tag like <span> with that classname:
<span class="hidden0001"> .... </span>
And in your code:
/*CSS*/
.hidden0001{display:none}
/*Jquery*/
$(document).ready(function(){
$("#draggable_1").click(function(){
$(".hidden0001").toggle();
});
});
The demo http://jsfiddle.net/BVmUL/181/