We Keep Coding

How to addClass & addRemove class or change property using .css?

I have tried many ways but still not working...
click the submit button & expand button(tab) to display the chatbot and hide the tab
click the minimize button(chatbot) to hide the chatbot and display the tab
1) addClass/RemoveClass
default.htm
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
JS
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
2) .css
$(this).closest(".cb-window").css("visibility", "visible");
Can someone please show me how to do it? Thank you.
or any other ways using jquery? .show/.hide , .toggle?

The problem was with your way of reaching the proper element and your understanding on closest option of jquery.
As per definition - The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent,
great-grandparent, and so on.
When you say closest on btnSubmit click event, the .cb-window was never its ancestor so $(this).closest('.cb-window') would basically fail. You need to traverse back to btnSubmit's parent who will be sibling of .cb-window and then you can easily get that element. Below is how you can achieve it. Also, you do not need multiple $(function(){ which is equivalent to $(document).ready and only one is sufficient.
$(function() {
$(".btnSubmit").click(function() {
$(this).closest(".ask-button-container").siblings('.cb-window').removeClass("hidden");
//closest ancestor would be .ask-button-container and its sibling is .cb-window
$(this).closest(".my-tab").addClass("hidden");
//did not find .my-tab element in your `html`
});
$(".minus").click(function() {
$(this).closest('.cb-window').addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

When we click or do operation on an element we can add or remove class and you can try like this.
$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)

the problem that you don't target the element you want in a right way .. you need to use
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest('.my-tab').next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest('div').next().next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest('div').next(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
chatbot.prev(".my-tab").removeClass("hidden");
});
});
.hidden{
display : none;
}
.minus{
padding : 5px;
background : red;
color: #fff;
text-align : center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign">-</span></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

<a> element not working properly when hiding parent?

I made this script, and despite one oddity, it works fine. It's hiding/showing the parent of div element with a class containing specific content. The problem when I press my <a> elements, that act as buttons, they "filter" the divs, but it leaves the first comment <a>? If I change the element do a <div> instead no problem, but with an <a> element it behaves weirdly? Is this just a bug or?
here is a JSFiddle: https://jsfiddle.net/g1puxhs7/2/
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
</div>
<style>
.row {
width: 200px;
margin: 10px;
background: #ccc;
padding: 4px;
}
</style>
SCRIPT:
//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

The problem is with your links:
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
You have 6 opening a tags, instead of 3 opening and 3 closing tags.
This is why the browser adds closing a tags in your script in a bunch of places, one of them in your first div—and then your whole DOM tree looks different than what you want.

Your markup needed to be cleaned up. Here is your markup cleaned up. Also, i find it best to add href for you anchor tags, and then you can comment them out with #, or you can add javascript:void(0). If you use the # approach, in your JS, you can add e.preventDefault();
HTML Cleaned:
<div>
<a class='viewBtn' href="#">Published</a>
<a class='viewBtn' href="#">Completed</a>
<a class='viewBtn' href="#">Created</a>
</div>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff" onclick="Comment">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
</div>
JS with preventDefault():
$('.viewBtn').click(function(e) {
e.preventDefault();
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

Javascript tabs will not open tab on pageload

I need to add to this script to make the webpage open a tab on page load.
How can I do this?
I am thinking there is just a JavaScript command I am missing. I just for the life of my cant see it.
JavaScript:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
if($(this).hasClass('current_tab')) return false;
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href'));
tab.find('.tab_content').hide(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" href= "D:\WP\css\style.css"/>
<script src="D:\WP\script\jquery1.9.1.js"></script>
<script src="D:\WP\script\easing.js"></script>
<script src="D:\WP\script\tabs.js"></script>
</head>
<body>
<!--Web page box-->
<div id="tab_style" class="box tabs">
<!--Header start-->
<div id="header">
<ul class="tab_nav">
<li>Home</li>
<li>About</li>
<li>Consulting</li>
<li>Social</li>
<li>Contact</li>
</ul>
</div>
<!--header end-->
<!--contents of site begin-->
<div class="content">
<div id="about" class="tab_content">
<br/>3
<br/>3
<br/>3
</div>
<div id="contact" class="tab_content"></div>
<div id="footer">
<p></p>
</div>
<!--footer ends-->
</div>
<!--contents end here-->
</div>
<!--Web page box end-->
</body>

This might not be the answer you were hoping for, but I just want to suggest that you start with something a little bit less convoluted than the code you posted.
Tabs can be easy: when a tab is clicked, just deactivate the current tab+panel and activate the new one.
Here is a quick demo I just threw together to show you:
HTML:
<div class="tabs">
<span class="tab" data-tab="thing1">Thing 1</span>
<span class="tab" data-tab="thing2">Thing 2</span>
<span class="tab" data-tab="thing3">Thing 3</span>
</div>
<div class="panels">
<div class="panel" data-tab="thing1">
<h2>Thing 1</h2>
<p>blah blah</p>
</div>
<div class="panel" data-tab="thing2">
<h2>Thing 2</h2>
<p>foo bar</p>
</div>
<div class="panel" data-tab="thing3">
<h2>Thing 3</h2>
<img src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg">
</div>
</div>
JavaScript:
// hook tab clicks:
$('body').on('click', '.tab', show);
// show first tab:
show('.tab');
function show(tab) {
// accepts an Event or a CSS selector:
tab = $(tab.target || tab).attr('data-tab');
// de-activate current tab:
$('[data-tab].active').declassify('active');
// activate new tab:
$('[data-tab="'+tab+'"]').classify('active');
}
CSS:
.tab {
display: block;
float: left;
padding: 5px 10px;
margin: 0 5px;
background: #FFF;
transform-origin: 0 100%;
transition: all 500ms ease;
cursor: pointer;
}
.tab:not(.active) {
opacity: 0.5;
transform: perspective(1000px) rotateX(30deg);
}
.panel {
background: #FFF;
padding: 20px;
}
.panel:not(.active) {
display: none;
}
JSFiddle Demo: http://jsfiddle.net/developit/42zcagjb/

How can I find IDs of DIVS, and assign those names as classes to other DIVS?

I'm fairly new to jquery and cannot figure this out. I have 3 divs with different id's but all start with "sharedform". I want to loop through those divs, grab each id and assign it as an identifying class to the 'slideHead' div preceding each. Any help would be greatly appreciated!
HMTL:
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>
jquery:
var $getclass = $(".drawer");
addclass = $getclass.find('[id^="sharedform"]').attr('id');
$(".slideHead").addClass(addclass);

I'd suggest:
// get all elements whose id starts with 'sharedform', iterate over that collection:
$('div[id^=sharedform]').each(function (){
// find the parent of the 'this' element:
$(this).parent()
// find the previous element, if it matches the passed-in selector:
.prev('.slideHead')
// add the id of the element we initially selected as a class:
.addClass(this.id);
});
$('div[id^=sharedform]').each(function() {
$(this).parent().prev('.slideHead').addClass(this.id);
});
div {
width: 80%;
margin: 0 auto;
min-height: 2em;
padding: 0.5em;
border: 1px solid #000;
}
.slideHead {
background-color: #f00;
}
.slideHead.sharedform\.something {
background-color: #0f0;
}
<div class="slideHead"></div>
<div>
<div id="sharedform.something">some text in the div</div>
</div>
But note that those class-names are problematic, given the inclusion of a period (.) in the id.

This should do it:
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
var newHTML = $('body').html(),
out = $('<pre/>', {class:'out'}).appendTo( 'body' );
out.text( 'NEW HTML\n' + newHTML );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>

Changing div content with jQuery

The thing is that I want middle1 to be displayed as default, as u see from the code block.
So the problem is now I have duplicated text, I mean it works but everytime I change text in one block I have to copy it and paste it in another it is so irritating.
What I have to add or remove ?
Thx in advance.
HTML:
<div class="middle">
<div id="middle1">
<p>text1</p>
</div>
<div id="middle2">
<p>text2</p>
</div>
<div id="middle3">
<p>text2</p>
</div>
<div class="middle_display" id="question">
<p>text1</p>
</div>
</div>
css:
.middle{
background-image:url(Images/struktura/midd_midd_border.jpg);
background-repeat:repeat-y;
height:auto;
float:left;
width:682px;
margin:0 0 0 0;
}
#middle1, #middle2, #middle3 {display: none;}
Jquery:
<script type="text/javascript">
$(document).ready(function() {
$('.question1').click(function(){
$('.middle_display').html($('#middle1').html());
})
$('.question2').click(function(){
$('.middle_display').html($('#middle2').html());
})
$('.question3').click(function(){
$('.middle_display').html($('#middle3').html());
})
});//end of ready
</script>

You want middle1's contents to be displayed as default? Insert this line:
$('.middle_display').html($('#middle1').html());
right below "$(document).ready..."