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");
});

Removing dynamically generated elements, when clicking on an element within itself in jQuery?

How can I remove a dynamically generated block of elements when clicking the button inside of it?
function controlContent(target, trigger) {
//this will add a new div to target which is an existing html element
$(trigger).on("click", () => {
$(target).append(`
<div class="dynamic-container">
<button class="remove-btn">Remove the div I am inside</button>
</div>
`)
}
//this should remove the div that was added when I click the remove button
$(target).on("click", ".remove-btn", () => {
$(this).closest(".dynamic-container").remove();
}
}

FIRST: you should use $(document).on("click", target, function(){...} for dynamically generated elements
SECOND: As simple as parent()
$(document).on("click", target, function(){
$(this).parent().remove();
});
EXAMPLE:
$(".button1").on("click", function(){
$(".generatedbuttons").append('<div class="green"><button class="button2">Click me to remove me and my parent</button></div>');
});
$(document).on("click", ".button2", function(){
$(this).parent().remove();
});
.button1 {
display:block;
float: left;
}
.green {
padding: 10px;
background-color: green;
display: block;
float: left;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button1">Click me to generate buttons</button>
<div class="generatedbuttons">
</div>

use normal function and also use dynamic click listener so you don't need to create a new event lister every time.
$(document).on('click', '.remove-btn', function(){
$(this).closest(".dynamic-container").remove();
})

changing the color of anchor element while clicking on enclosing div

I need to change the color of my anchor element from black to white while the enclosing div is clicked.
code:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(".functionHyperlink").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view">
</div>
</div>

To achieve this you can use toggleClass() to add/remove a pre-defined CSS rule you apply to the .settings-list-container element. This class can then be set to affect the child .functionHyperlink element, something like this:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(this).toggleClass('active');
});
});
.functionHyperlink {
color: #000;
}
.settings-list-container.active .functionHyperlink {
background-color: #F00;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view"></div>
</div>
If you only want the colour to be added once, change toggleClass() to addClass().

A possibility is to use angular.element() and css selector
angular.element('.functionHyperlink').css('color', '#fff');

If I understand you correctly, you only want to achieve the color change while clicking. You could try so with pure CSS like this.
.settings-list-container:active .functionHyperlink {
color: white;
}
Or you could go by jQuery and add a class while clicking the div:
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).bind('mousedown', function() {
$(this).find('.functionHyperlink').addClass('inverted');
}).bind('mouseup', function() {
$(this).find('.functionHyperlink').removeClass('inverted');
});
});
});
.functionHyperlink.inverted {
color: white;
}
If you want the element to stay inverted, use the following jQuery instead.
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).click(function(e) {
e.preventDefault();
$(this).find('.functionHyperlink').toggleClass('inverted');
});
});
});

jQuery slideDown not functioning correctly

I wish to animate a div to make it appear and slide down with jQuery.
I have got my script to work where you hover over an image and another div slides in, should the user leave the mouse hover, the div will slide up and disappear.
Problem:
The first time i hover over the image, nothing happens. I have to leave my mouse and hover over it a second time for the effect to start working, I dont get why this is???
jQuery:
function show_action(){
$(function(){
$(".action").hide();
$(".logo").hover(
function(){ $(".action").slideDown(); },
function(){ $(".action").slideUp(); }
);
});
}
CSS:
#action_text{
display:none;
}
HTML:
<div class="center_container">
<div class="action" id="action_text"><span>Click To Upload</span></div>
<img src="images/logo.png" class="logo" onmouseover="show_action();">
</div>

No need to call .hide() on the .action element. Just give it display: none in your css, so that it will not show when the page loads. That way, you don't need the .stop() to clear the animation queue, and it also prevents a 'flicker' effect where your .action element will show up when the page loads for a brief moment until .hide() gets called.
$(document).ready(function() {
$('.logo').hover(
function() {
$(".action").slideDown();
},
function() {
$(".action").slideUp();
}
);
});
.action {
width: 100%;
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="logo">LOGO</span>
</div>
<div class="action">
<span>Action</span>
</div>

I think you are calling function show_action as onhover="show_action() remove that and move the rest code outside function wrapping, otherwise the hover() event handler will only bind after the first hover. additionally use stop() to clear the animation queue
$(function() {
$(".action").hide();
$(".logo").hover(
function() {
$(".action").stop().slideDown();
},
function() {
$(".action").stop().slideUp();
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=logo>Hover here</div>
<div class=action>content<br>here</div>
Update : You can remove $(".action").hide(); by adding following css
.action {
display: none;
}

display different div when click buttons

I am trying to accomplish a page which has two buttons on the bottom. Clicking each of these buttons will bring out different content.
For example:
<div id="page1">...some content...</div>
<div id="page2">...some content...</div>
My css:
#page1 { display: block;}
#page2 { display: none;}
And the buttons are images:
<div id="button1"><img src="images/button1.png"/></div>
<div id="button2"><img src="images/button2.png"/></div>
I am using javascript to make the buttons work. #block is an object that moves when the buttons are clicked:
<script language="javascript">
$(document).ready(function () {
$("#button1").click(function () {
$("#block").animate({
left: "10px"
});
$("#page1").attr("display", "block");
$("#page2").attr("display", "none");
});
$("#button2").click(function () {
$("#block").animate({
left: "100px"
});
$("#page1").attr("display", "none");
$("#page2").attr("display", "block");
});
});
</script>
So when #button1 is clicked:
#page1 will be changed to display:block;
#page2 will be changed to display:none; - hidden
When #button2 is clicked:
#page1 will be changed to display:none; - hidden
#page2 will be changed to display:block;
This means it will show the content on page2

display is not an attribute, it's a property of the style attribute/object. But jQuery has its own show, hide and toggle methods, so you can simply use this:
<script language="javascript">
$(document).ready(function()
{
$("#button1").click(function(){
$("#block").animate({left:"10px"});
$("#page1, #page2").toggle();
});
$("#button2").click(function(){
$("#block").animate({left:"100px"});
$("#page1, #page2").toggle();
});
});
</script>

you really should have a css class called page and another called page-invisible. Then you just do
$('#page1').addClass("page-invisible");
$('#page2').removeClass("page-invisible");
the class page-invisible just is {display:none}, or it can be something like {opacity:.3; z-index:0} etc to have it kind of "behind" the other one (you would have to set position absolute etc to put the divs on top of eachother.