We Keep Coding

Make content of header disappear when menu opens

I basically want to make that when I press on a button the first time it adds display: none; to an element and when I press it again it makes the element appear again (so add display: none;). How would I do this with jQuery?
This is the jQuery I tried to implement but as I'm new to Javascript I don't know why it isn't working.
$('#menuBtn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.header-text').css({
'display': 'none'
});
} else {
$('.header-text').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});

Use toggle or slideToggle (With animation)
$('#menuBtn').on('click', function() {
$('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
$('.header-text').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>
<div class="header-text">
This content must me show and hide
</div>

You could supply a modifier class in some external stylesheet for hiding the text and toggle it via toggleClass.
Word of advice: It's best not to use something like toggle because it will inject inline css into your elements, making it difficult to override in the long-run for something so simplistic.
const $headerText = $('.header-text');
$('#menuBtn').click(function() {
$headerText.toggleClass('header-text--hidden');
});
.header-text--hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn" type="button">Toggle</button>
<header>
<p class="header-text">Text 1</p>
<p class="header-text">Text 2</p>
<p class="header-text">Text 3</p>
<p class="header-text">Text 4</p>
</header>

You actually don't need jQuery for this.
You can add CSS rule to set .hidden to display: none and then toggle that class when the button is clicked.
To catch the click event on the button, you need a click event listener
const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');
toggle.addEventListener('click', () => {
header.classList.toggle('hidden')
});
.header {
background: red;
height: 3em;
}
.hidden {
display: none;
}
<header class="header"></header>
<button class="menu-toggle">Click me!</button>

.hidden{display:none !important;}
$('#menuBtn').click(function() {
$('.header-text').toggleClass("hidden");
});

How to toggle between CSS changes

I have a button that when pressed hides a div using 'Display: None;'.
How do I write in jquery to make the css property toggle between Display: None and Display: Block?
$('#help_btn').click(function(){
$('#help_box').css('display', 'none');
});
when you click it again
$('#help_box').css('display', 'block');
so on and so forth. Thanks!
edit:
My css would look like this
#help_box {
display: block;
}
and my html is
<div id='help_box><p> Some helpful info!</p></div>
<button id='help_btn>help?</button>

You could toggle CSS classes as commented by #showdev. Or you could try this
$('#help_btn').click(function() {
if($('#help_box').is(':visible')) {
$('#help_box').css('display', 'none');
} else {
$('#help_box').css('display', 'inline');
}
});

Use toggleClass(); as other answers suggest or use toggle();
$('#help_btn').click(function(){
$('#help_box').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help_box"><p> Some helpful info!</p></div>
<button id="help_btn">help?</button>
Note that you have typo in your html code, you've got to properly double-quote id of your elements.

You can use toggleClass() to toggle two classes.
ToggleClass logic is that we add the missing class and we remove the previous one.
$('#help_btn').click(function(){
$('#help_box').toggleClass("hidden shown");
});
.shown { display: inline; }
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="help_btn">Change</button>
<div id="help_box"><p> Some helpful info!</p></div>

Create any class
.someclass{ display: inline}
Then toggle class
$('#help_btn').click(function(){
$('#help_box').toggleClass("someClass");
});

There are two common ways:
The first one is by checking the css property and reversing it, something like this:
$(".something-i-clicked").on("click", function() {
if($(".my-class").css("display") == "none") { // if display: none; is set to .my-class
// reverse it to display: block;
$(".my-class").css("display", "block");
} else { // it has display: block;
// reverse it to display: none;
$(".my-class").css("display", "none");
}
})
The second way is by toggling a modifier css class, maybe like this:
// my_css_file.css
.my-class {
display: none;
}
.d-block {
display: block;
}
// my_js_file.js
$(".something-i-clicked").on("click", function() {
// toggle the class
$(".my-class").toggleClass("d-block");
})

How to add a class to a div on click, and remove the class by clicking elsewhere on the page

I would like to expand a div, filters, when filtertoggle is clicked. I would like to do this by adding the class on to filters. Then, when the user clicks anywhere else on the page, I would like to remove the on class, thereby closing filters.
Here is the code I have attempted:
jQuery(document).ready(function($) {
$('body').click(function(evt) {
if (evt.target.attr('class').includes('filtertoggle')) {
$(this).toggleClass('on');
$('.filters').slideToggle(200);
return;
} else {
$(this).element.className = element.className.replace(/\bon\b/g, "");
return;
});
As it stands, filters does not open.

Your logic has a couple of issues. Firstly, evt.target is an Element object, not a jQuery object, so it has not attr() method. You need to wrap it in a jQuery object to make that work. Then you can use hasClass() to check what class is on the target.
Also a jQuery object has no element property, so element.className will cause a syntax error. You can just use removeClass() in that case. Try this:
$('body').click(function(evt) {
if ($(evt.target).hasClass('filtertoggle')) {
$('.filtertoggle').addClass('on');
$('.filters').slideToggle(200);
} else {
$('.filtertoggle').removeClass('on');
$('.filters').slideUp(200);
}
});
body, html { height: 100%; }
.on { color: #C00; }
.filters { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
You should also note that it may be possible to achieve this in CSS alone, depending on how your HTML is structured. You can use the :focus selector to do it, like this:
body, html { height: 100%; }
.filtertoggle { outline: 0; }
.filters {
opacity: 0;
transition: opacity 0.3s;
}
.filtertoggle:focus { color: #C00; }
.filtertoggle:focus + .filters { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle" tabindex="1">
FilterToggle
</div>
<div class="filters">
Filters...
</div>

How To Make visible a button only when a div clicked

$(document).ready(function () {
$(".col-sm-4.righPanelRobotIcons").click(function () {
$("#Schedule").show();
});
});
Here .col-sm-4.righPanelRobotIcons is A generic div class.When I click the div I want to show a button which has Schedule as Button id and initially hidden visibility. Can anyone help me out?

You have to use display: none; on your css to hide your button.
$(".col-sm-4.righPanelRobotIcons").click(function() {
$("#Schedule").show();
});
.righPanelRobotIcons {
width: 100px;
height: 100px;
background-color: red;
}
#Schedule {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 righPanelRobotIcons"></div>
<button type="button" id="Schedule">Click Me!</button>

if you have class "hide" attached to that button, then do this
$(".col-sm-4.righPanelRobotIcons").click(function () {
$("#Schedule").removeClass("hide");
});
.show() works only when you give css property display:none, for visibility:hidden, you have to change css to visibility:visible on click
$(".col-sm-4.righPanelRobotIcons").click(function () {
$("#Schedule").css("visibility", "visible");
});

If you have HTML getting generated dynamically, you might have to use jquery on event.
Can you try something like the snippet below :
$(".col-sm-4.righPanelRobotIcons").on("click",function () {
$("#Schedule").show();
});
$(".col-sm-4.righPanelRobotIcons").on("click", function() {
$("#Schedule").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-4 righPanelRobotIcons"> Click Me!
<button type="Button" id="Schedule" style="display:none">Schedule</button>
</div>

CSS hover and jquery

Hover effect of CSS is not executing anymore after jquery-action:
I do have the following CSS:
#slider-information-content{
display: inline;
visibility: hidden;
}
#slider-information:hover #slider-information-content {
display: inline;
visibility: visible;
}
and the following jquery code:
$("#slider-information-content-close").click(function(e) {
$("#slider-information-content").css("visibility", "hidden");
e.preventDefault();
return false;
});
The hover effect is working fine. Also I can hide the div with jquery. But when I hide the div with jquery the hover effect is not working anymore and the div is not coming up. How can I change it? And also WHY?
JS Fiddle

The problem with your code is, the visibility property set through jQuery is getting precedence as an inline style is set.
You can use jQuery .hover() for this,
$("#slider-information").hover(function (e) {
$("#slider-information-content").css("visibility", "visible");
}, function (e) {
$("#slider-information-content").css("visibility", "hidden");
});
Demo

Setting CSS on an element in JavaScript (or jQuery) applies the value to the element's style="..." attribute.
This has higher precedence than any rule in a stylesheet. In this case, you have 0210 as the precedence for your visibility: visible, but the .css("visibility","hidden") has a precedence of 1000 and therefore wins.
You can circumvent this by using:
#slider-information:hover #slider-information-content {
visibility: visible !important;
}
However, the use of !important almost always means you're doing something wrong.

You're mixing jQuery and CSS, which can be tricky. If you switch to using jQuery for both the hover and click behavior is will simplify the code and fix the issue.
http://jsfiddle.net/mcH7L/2/
CSS
#slider-information-content {
display: inline;
visibility: hidden;
}
#slider-information:hover #slider-information-content {
display: inline;
visibility: visible;
}
HTML
<div id="slider-information">Hover this
<div id="slider-information-content">
<div id="slider-information-content-close">Close</div>
Hidden content here</div>
</div>
jQuery
$("#slider-information").hover(function (e) {
$("#slider-information-content").show();
}, function (e) {
$("#slider-information-content").hide();
});
$("#slider-information-content-close").click(function (e) {
$("#slider-information-content").hide()
e.preventDefault();
return false;
});