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");
})
Related
function burgerMenu(){
//alert(document.getElementById("hiddenMenuUL").style.display);
if(document.getElementById("hiddenMenuUL").style.display="none"){
document.getElementById("hiddenMenuUL").style.display="block";
}
else if(document.getElementById("hiddenMenuUL").style.display="block"){
document.getElementById("hiddenMenuUL").style.display="none";
}
}
I want to toggle the burger menu icon. So if I press the icon the burgerMenu() function will be toggle and verify if its display: none then change to display:block and vice versa. hiddenMenuUL is the for list of links.
This line below is the button line in HTML:
<button class="btn" onclick="burgerMenu()">☰</button>
My CSS for hiddenMenuUL
#hiddenMenuUL{
display: none;
list-style: none;
width: 100%;
justify-content: center;
}
When you are writing your if, you are not actually checking if the display === "none", you are trying to set it to none.
What you should be doing looks like this:
function burgerMenu(){
let menuStyle = document.getElementById("hiddenMenuUL").style.display;
if(menuStyle === 'none'){
document.getElementById("hiddenMenuUL").style.display="block";
}
else {
document.getElementById("hiddenMenuUL").style.display="none";
}
}
Edit:
It seems display rule is defined in CSS, and isn't inline.
.style can only reach inline styles, for example:
<div id="hiddenMenuUL" style="display: none;"></div>
Adding 'display: none' inline like in the example above should be the fastest and easiest way to 'fix' it in your particular scenario, although it probably wouldn't be considered the best practice.
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>
function clickMe() {
$('.hidden').toggle();
$('.visible').toggle();
}
.hidden {
visibility: hidden
}
.visible {
visibility: visible
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='hidden'>HiddenLabel</label>
<label class='visible'>VisibileLabel</label>
<button onClick='clickMe()'>Click me</button>
This works well for the visible label, but not for the hidden one, as it toggles the visbility of the 'VisibleLabel', but the visibility of the 'HiddenLabel' remains unchanged (hidden).
You are trying to swap the classes, and not the visibility. You should use .toggleClass:
function clickMe() {
$('.hidden, .visible').toggleClass("hidden visible");
}
Snippet
function clickMe() {
$('.hidden, .visible').toggleClass("hidden visible");
}
.hidden {
visibility: hidden
}
.visible {
visibility: visible
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='hidden'>HiddenLabel</label>
<label class='visible'>VisibileLabel</label>
<button onClick='clickMe()'>Click me</button>
The reason being, the function .toggle() alone can do the thing what you are trying to do, but now you need to toggle the classes and not the elements.
The jQuery.toggle() changes the css-property display.
And not the css-property visibility.
Try instead:
.hidden {
display: none;
}
.visible {
display: block;
}
Using DOM manipulation need to change this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
to this:
ul.tabbernav li
{
list-style: none;
margin: 0;
display: none;
}
Only using pure javascript functions. Any help is appreciated
You shouldn't aim to change the css but rather add or remove a class to the html element, which would correspond to a css with display:none.
Here is an example :
css :
.hidden { display:none; }
javascript :
document.getElementById("hideMe").classList.toggle("hidden");
You can use this, if you want pure javascript....
function changeCss(){
var selector = document.getElementById('your_selector')
selector.style.display = "none"
}
and then you can call it when you need to use it.
and you canuse this if you have access to some jquery
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').style('display' , 'none')
})
})
More so you can use classes (adding and removing) like this:
If you have your css like this :
.hidden{display : none}
then you can use this:
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').addClass('hidden')
})
})
and if you want to re-add the class
$(document).ready(function(){
$('.some_button_or_link').on('click',function(){
$('your_selector').removeClass('hidden')
})
})
and then note that where I have used .on('click') you can as well use other kinds of events. Try and post back. Cheers!
$('.ul.tabbernav li').css('display', 'none');
More efficiently:
<script>
(function(){
$('.ul.tabbernav li').css('display', 'none !important');
})();
</script>
hi everyone i cant find the solution for my question on google. i just want to hide the images using there icon-value
like in the below example i just want to hide the image which have icon-value="1" in the div which have .box class
<div class="box">
<div class="icon"><img src="xyz/smiley.png" icon-value="1" icon-index="0"></div>
<div class="icon"><img src="xyz/1.png" icon-value="2" icon-index="1"></div>
</div>
use an attribute selector.
.box img[icon-value="1"] {
display: none;
}
CSS solution:
.box img[icon-value="1"] {
display: none;
}
Demo
PS: Notice the value in quotes. I don't think CSS attribute selectors will work if the value is not specified in quotes
jQuery solution:
$(".box img[icon-value=1]").css("display", "none");
Demo
using css try following
.box .icon img[icon-value="1"] {
display: none;
}
or if you are using jquery you can try this also
$(".box img[icon-value=1]").hide();