Make content of header disappear when menu opens - javascript

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

Related

how to remove the class on clicking a button and adding new class [duplicate]

This question already has answers here:
Easiest way to toggle 2 classes in jQuery
(7 answers)
Closed 1 year ago.
suppose there is a div with class "box" on clicking the button with class "button" I want to remove the class "box" from the div and add a absolutely new class "active" to the div. what will be the jQuery code of the following?
html
<div class="box">
<button class="button">button</button>
</div>
and also how should I add the new class in CSS ? like normally we add.
You can use removeClass method to remove class and use addClass method to add class using jquery.
You can also chain method as:
box.removeClass("box").addClass("active");
const box = $(".box");
$(".button").on("click", function() {
box.removeClass("box");
box.addClass("active");
})
.box {
background-color: red;
}
.active {
background-color: yellowgreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>
Perhaps the easiest way is to use the classList.replace method which you can use with both jQuery, and vanilla JS.
jQuery.
$('.button').click(function () {
const parent = this.parentNode;
parent.classList.replace('box', 'active');
});
.active { background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>
Vanilla JS.
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
const parent = this.parentNode;
parent.classList.replace('box', 'active');
}
.active { background: red; }
<div class="box">
<button class="button">button</button>
</div>
The simplest jQuery technique is probably with toggle:
$('.button').click(function() {
$(this).parent().toggleClass('box active');
});
.box {
background: #ddd;
}
.active {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>

CSS manipulation using buttons

I am trying to make a small settings page where users can change how the site looks, I want them to be able to click a button and the sites CSS update along with it (along with the background colo(u)r) and I would like the changes saved across all pages.
How would I do this?
From your question, I have come up with a solution that suits your use case better in a neater implementation.
Take the following code for example;
<div id="container">
<div>
<h1>Page Header</h1>
<h3>Page Sub Header</h3>
<p>Page Content</p>
</div>
<div class="buttons">
<button id="default-theme" onclick="setTheme(event)">default</button>
<button id="theme-one" onclick="setTheme(event)">theme one</button>
<button id="theme-two" onclick="setTheme(event)">theme two</button>
</div>
</div>
In the code above, you have some unstyled elements and some buttons to set the preferred theme color.
You can set the theme colors like below in your CSS file. The code below is an SCSS implementation. Check out the live solution on codePen https://codepen.io/sirwhite/pen/mdbNjLG
<style>
// Default theme color
.default-theme {
background: $default-bg;
}
.default-theme h1 {
color: $default-color;
}
.default-theme h3 {
color: $default-color;
}
.default-theme p {
color: $default-color;
}
// Theme One Colors
.theme-one {
background: $theme-one-bg;
}
.theme-one h1 {
color: $theme-one-color;
}
.theme-one h3 {
color: $theme-one-color;
}
.theme-one p {
color: $theme-one-color;
}
// Theme Two Colors
.theme-two {
background: $theme-two-bg;
}
.theme-two h1 {
color: $theme-two-color;
}
.theme-two h3 {
color: $theme-two-color;
}
.theme-two p {
color: $theme-two-color;
}
</style>
Now, use javascript to set the theme color based on the user's selection
var theme = '';
var container = document.getElementById('container');
window.addEventListener('load', function() {
if(localStorage.theme && localStorage.theme !== '') {
theme = localStorage.theme;
container.classList.add(theme);
}
else {
theme = 'default-theme';
}
});
function setTheme(event) {
theme = event.target.id ;
localStorage.theme = theme;
container.classList = [];
container.classList.add(theme);
}
You can use LocalStorage to persist the selected theme value across all pages. When the page loads, you can check if localStorage value is set else set the theme to the default theme.
Check out the live solution on codePen https://codepen.io/sirwhite/pen/mdbNjLG
You could do this with javascript or jquery by calling a function when your button is clicked.
Our HTML, notice how we call myFunction when we click on the button.
<h1 class="item blue">Hello World</h1>
<button onClick="myFunction()">Click Me</button>
Some basic CSS:
.blue {
color: blue;
}
.red {
color: red;
}
Our Javascript will add a class depending on what class is already present. We can change our target variable to add/remove classes from a different element.
function myFunction() {
var target = document.querySelector('.item');
if (target.classList.contains('red')) {
target.classList.remove('red')
target.classList.add('blue')
} else if (target.classList.contains('blue')) {
target.classList.add('red')
target.classList.remove('blue')
}
}
This is a very cookie-cutter way of doing this, but it works and you can take the same principles here and apply it to your code.
To use this site-wide, just use a seperate javascript file and import the same javascript and call the same function on each page.
Hope this helps :)
As per my understanding of the question you want to change the background colour on the button click
<!DOCTYPE html>
<html>
<head>
<style>
.yellows {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">click me </button>
<script>
$('#btn').click(function() {
$('body').toggleClass( "yellows" );
});
</script>
</body>
</html>

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>

When I try to dynamically load a div, all the classes and ids aren't registering, even with .on

EDIT: REQUESTED MORE CODE:
In my index.html tags, it contains two divs:
<div id="index-banner">
blabla
</div>
<div id="java-cheatsheet-placeholder"> </div>
Then my java-cheatsheet.html contains:
<div id="content">
<h1>Java Cheat Sheet </h1>
<input type="button" value="Show Keywords" id="keywordButton">
<p> To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the
important keyword(s). e.g. There are <span class="answer">eight</span> bits in a byte. Disable/Enable all the
hidden words by tapping the button at the top right. </p>
</div>
I then have a bunch of code, that is tested and works properly, if I push on the button(with an id of "keywordButton"), it either reveals or hides ALL the span elements with a class of "answer", but if you click on a specific span, it will hide/show that and only that word. This is fully functional on its own. But if I try using this (in my custom.js file):
$("#javaCheatSheet").click(function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it loads the data, but clicking the button or the spans NO longer works, unless I also add
<script type="text/javascript" src="../js/custom.js"></script>
in my java-cheatsheet.html file at the bottom. I of course don't want to do this, and would rather have .on() working with jquery, but if I try what most people have suggested:
$("#javaCheatSheet").on('click', '#keywordButton, .answer', function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it doesn't even load the html into index.html at all >_>.
Is this what you were looking for?
$("#javaCheatSheet").on("click", "#keywordButton, .answer", function () {
$("#index-banner").load('../java-cheatsheet/javaSummary2.html');
});
Edit:
$("#java-cheatsheet-placeholder").on("click", "#keywordButton, .answer", function () {
// Show/hide answers here
});
You haven't added jquery. With jquery your code works fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see below.
var toggleColorNotVisible = "rgb(0, 0, 0)";
var toggleColorVisible = "rgb(0, 0, 0)";
var backgroundColorVisible = "rgb(255, 255, 255)";
var showAnswersButton = false;
$(document).on('click', '#keywordButton', function() {
if (showAnswersButton) {
$(".answer").css("color", toggleColorNotVisible);
$(".answer").css("background-color", toggleColorNotVisible);
$(".answer").each(function() {
this.hideAnswers = false;
});
} else {
$(".answer").css("color", toggleColorVisible);
$(".answer").css("background-color", backgroundColorVisible);
$(".answer").each(function() {
this.hideAnswers = true;
});
}
showAnswersButton = !showAnswersButton;
});
$(document).on('click', '.answer', function() {
console.log("LOL")
this.hideAnswers = this.hideAnswers || false;
if (this.hideAnswers) {
$(this).css("color", toggleColorNotVisible);
$(this).css("background-color", toggleColorNotVisible);
} else {
$(this).css("color", toggleColorVisible);
$(this).css("background-color", backgroundColorVisible);
}
this.hideAnswers = !this.hideAnswers;
});
.answer {
font-weight: bold;
color: #000000;
background-color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keywordButton {
position: fixed;
top: 10%;
right: 1%;
opacity: 0.9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Show/Hide Keywords" id="keywordButton">
<hr>
<h2> Intro </h2>
<p>Stuff</p>
<hr>
<p>To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the important keyword(s). e.g. There are <span class="answer">eight</span> bits in a<span class="answer"> byte</span>. Disable/enable using button for all!

Show and Hide using jquery

There are number of examples for add and remove in jquery.
But my code is bit different to examples. when i click add it show second and if i click again on add i want show third as well as when i click remove hide the third also until five. Here is my code
CSS
#second {
display: none;
}
#third {
display: none;
}
#forth {
display: none;
}
#fifth {
display: none;
}
HTML
<div id="header">
add - remove
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
<div id="forth">forth</div>
<div id="fifth">fifth</div>
</div>`
JavaScript
$(document).ready(
function() {
$("#add1").click(function() {
$("#second").show();
});
$("#remove").click(function() {
$("#second").hide();
});
});
HERE IS CODE
JSfiddle
Here is an approach you can use. First, add a class to all elements that you want to show / hide. In this case I used class toggle:
<div id="header">
add - remove
<div id="first" class="toggle">first</div>
<div id="second" class="toggle">second</div>
<div id="third" class="toggle">third</div>
<div id="forth" class="toggle">forth</div>
<div id="fifth" class="toggle">fifth</div>
</div>
Then when you are adding an element, use function first to find first not visible element with class toggle and show it. When you want to remove element, use function last to find last not visible element and hide it:
$(document).ready(function() {
// when add is clicked, show first not visible element with class 'toggle'
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
// when remove is clicked, hide last visible element with class 'toggle'
$("#remove").click(function() {
$('.toggle:visible').last().hide();
});
});
Here is updated JSFiddle

Categories