I am showing articles in a list of divs. Each div has a data attribute that contains the status of the article.
<div id="article_1" data-status="read"> ... </div>
<div id="article_2" data-status="unread"> ... </div>
There is a button that toggles views to show "All Articles" or only "Unread" articles.
My toggle function looks like this, which is working fine:
function toggle(status) {
if (status == 'all') {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'block';
}
});
}
else {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'none';
}
});
}
}
Question: Is there a better (faster, efficient) way to select divs with data-status attribute and based on the status toggle the view?
Ref:
[1] Jquery select all elements that have $jquery.data()
[2] Show/hide multiple divs based on a value in their attribute
[3] filtering divs in jQuery and hiding them based on a custom data attribute tag
You can just select on the data-status attribute itself:
function toggle(status) {
if (status == 'all') {
$('[data-status=read]').css('display', 'block');
}
else {
$('[data-status=read]').css('display', 'none');
}
}
toggle('unread');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="article_1" data-status="read"> read </div>
<div id="article_2" data-status="unread"> unread </div>
I think you can go very simple here:
function toggle(status) {
if (status == 'all') {
$('*[data-status="read"]').show();
} else {
$('*[data-status="read"]').hide();
}
}
Hope that helps
Related
I think this is very easy, but I just can't seem to twig it at the moment. I want to use a JavaScript function to set the visibility of an HTML tag.
I realise the below is wrong as hidden doesn't take a boolean. I'm just struggling to click what the easiest way to do it is?
So I have some script like this:
<script>
function evaluateBoolean() {
if (location.hostname.indexOf("someval" > 0) {
return true;
} else {
return false;
}
}
</script>
And I wanted to use it something like this:
<div hidden="evaluateBoolean()">
this will be shown or displayed depending on the JavaScript boolean
</div>
I would recommend doing it by altering the display style in the JavaScript code.
const el = document.getElementById('container');
const btn = document.getElementById('btn');
btn.addEventListener('click', function handleClick() {
if (el.style.display === 'none') {
el.style.display = 'block';
btn.textContent = 'Hide element';
} else {
el.style.display = 'none';
btn.textContent = 'Show element';
}
});
You have a div with id: myDIV
<div id="myDIV" class="card-header">
Hello World
</div>
You then call this Javascript function to show the element:
function showDiv() {
document.getElementById('myDIV').style.display = "block";
}
and this one to hide it:
function hideDiv() {
document.getElementById('myDIV').style.display = "none";
}
Note, that you can hide a div by:
<div id="myDIV" class="card-header" style="display:none">
Hello World
</div>
And then call the function to show it.
You trigger must be outside of the element which you hide. because if hided you cant even clicked. The js function classList toggle would be good.
function evaluateBoolean() {
const d = document.querySelector('.w div');
d.classList.toggle('hide');
}
.w {
height: 40px;
background: yellow;
}
.hide {
display: none;
}
<div class="w" onclick="evaluateBoolean()">
<div> this will be shown or displayed depending on the javascript boolean </div>
</div>
You can't explicitly run js in your html, if you aren't using any framework like angular or react, where property binding is allowed.
For achieving your intentions with js you can use this approch:
Add to your div an id:
<div id="myDiv"> Toggled div </div>
In your js script modify your function evaluateBoleean() to show/hide the element:
function evaluateBoolean() {
const div = document.querySelector("#myDiv");
if (location.hostname.indexOf("someval" > 0) {
div.hidden = true;
} else {
div.hidden = false;
}
There's a very easy option:-->
having a blank text
firsly replace the html code with this:-->
<div hidden="evaluateBoolean()" id="ThingToBeHidden"> this will be shown or displayed depending on the javascript boolean </div>
and put js code:-->
document.getElementById("ThingToBeHidden").innerHTML = "";
So you have assigned the div to have it's special id which none other element has.
So now the js code selects the div with that id and then sets the context of it to blank.
If you want the text to appear again, the js code is:-->
document.getElementById("ThingToBeHidden").innerHTML = "this will be shown or displayed depending on the javascript boolean";
You can hide an element in several ways (using jQuery):
const o = $(cssSelectorForElementToStyle);
$(o).hide();
$(o).toggle();
$(o).css('display', 'none');
$(o).addClass('css_class_for_hiding_stuff');
Here using vanilla JavaScript:
const o = document.querySelector(cssSelectorForElementToStyle);
o.style.display = 'none';
o.classList.add('css_class_for_hiding_stuff');
But your question doesn't point out exactly when you are going to make this check. So let's assume you are going to check the boolean value once when the page is loaded and hide or show a given element according to that value:
$(document).ready(
() => {
if (evaluateBoolean() === true) {
// do nothing in this case
} else {
$('#elementWithThisId').css('display', 'none');
}
}
);
Without jQuery:
document.addEventListener("DOMContentLoaded", function() {
if (evaluateBoolean() === true) {
// do nothing in this case
} else {
document.querySelector('#elementWithThisId').style.display = 'none';
}
});
how add localStorage to show/hide divs? Before asking this question I have see this article Use localStorage.setItem to keep same show/hide divs but that does not help me, still i can't do it by my self, so i need help! thanks.
my code
$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
if (this.checked) {
$("#mesfavgame").hide();
}
else {
$("#mesfavgame").show();
}
});
});
if checkbox .AvGamesCheckBox is checked, localStorage hide message id="mesfavgame", if checkbox .AvGamesCheckBox is unchecked localStorage show message id="mesfavgame"
<div id="favorite">
<div id="mesfavgame"> You don't have any favorite game </div>
</div>
Try the following:
HTML:
<input type="checkbox" class="AvGamesCheckBox">
<div id="favorite">
<div id="mesfavgame"> You don't have any favorite game </div>
</div>
JS:
$(function() {
var status = localStorage.getItem('chkStatus');
if(status == 'true'){
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").attr('checked', true)
}
else{
$("#mesfavgame").css("display", "block");
$(".AvGamesCheckBox").attr('checked', false)
}
$(".AvGamesCheckBox").click(function() {
if (this.checked) {
$("#mesfavgame").hide();
}
else {
$("#mesfavgame").show();
}
localStorage.setItem("chkStatus", this.checked);
});
});
Local storage is easy enough to use.
What you should do, is keep a variable of all the changes made in the page from the default.
For example, let's say you got a div in the page that the user can show or hide:
#header-div
Which is hidden at the beginning.
You simply add it to an array when it is open and remove it when it is closed.
And then you save it to local storage
openedDivs= [];
$(".clickable-header").click(function() {
if (this.checked) {
$("#header-div").hide();
openedDivs= openedDivs.filter(function(value) { return value !== "header-div" });
localStorage.setItem("openedDivs", openedDivs);
}
else {
$("#header-div").show();
openedDivs.push("openedArray");
localStorage.setItem("openedDivs", openedDivs);
}
});
And then, simply on page load, get the variable from the storage using
localStorage.getItem("openedDivs")
And use it to apply it to your document.
$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
if (this.checked && localStorage.getItem("isChecked") != null && localStorage.getItem("isChecked") == "true") {
$("#mesfavgame").hide();
localStorage.setItem("isChecked", "false")
}
else {
$("#mesfavgame").show();
localStorage.setItem("isChecked", "true");
}
});
});
Trying to hide a div if a logo exists. Tried a few things with no joy, can you spot the error?
if ($('#mylogo').css('display', 'block') {
$('#sign_up_now').css('display', 'none');
}
and
$(document).ready(function(){
if ($('#my_logo').length) {
$('#sign_up_now').css('display', 'none');
}
});
So if my my_logo is active (display:block) of even present. Hide the div with an ID of sign_up_now
Would be great to have two options working, as I might need to hide a div later if sign_up_now div exists too.
EDIT
When placing in the footer of the page, if running two JQuery functions. I assume they don't seperate script tags just closing off with a ;
<script>
$(document).ready(function () {
if ($('#intrica_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
</script>
<script>
$(document).ready(function () {
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>
or should it be
<script>
$(document).ready(function () {
if ($('#my_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>
try using :visible and is() to test if the logo is visible, use hide() to hide the logo
if ($('#mylogo').length && $('#mylogo').is(':visible')) {
$('#sign_up_now').hide();
}
$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
or
$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').hide();
}
});
put any of these examples.
In your if statement you are assign the display property instead of checking.
Modify your code as below.
$(document).ready(function() {
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
You can get an element display property with the following snippet:
$(document).ready(function() {
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
//element's display is not block
}
});
Elements with visibility hidden or opacity zero are considered to be visible, because they have space in the layout. You can check if element is visible like the following snippet:
function isHidden (element) {
return $(element).is(":hidden") || $(element).css("visibility") == "hidden" || $(element).css('opacity') == 0;
}
var isShowed = !isHidden(checkElement);
If you want to check element is visible display != none and ignoring the parents visibility then you will find that doing .css("display") == 'none' is faster and will give you accurate visibility.
Here you go:
$(document).ready(function(){
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
$('#sign_up_now').css('display', 'block');
}
});
You can add a class to your element and detect if element has class or no
if($("#mylogo").hasClass("visible")){
$('#sign_up_now').css('display', 'none')
$("#mylogo").removeClass("visible");
}
guys
I have a following HTML code with wrap (notice-wrap):
<div class="notice-title">
Title
</div>
<div class="notice-content">
Content text
</div>
<div class="notice-toggle" value="Hide" onclick="toggle()">
<img src="../img/icon_rollout.png">
</div>
And Toggle Script
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?
P.S. I also use Angular
Thanks in advance!
Maybe you can just change this:
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
to:
function toggle() {
var noticeToggleElement = $(this);
var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
noticeToggleElement.val(newStatus);
if (newStatus == "Show") {
noticeToggleElement.css('overflow','hidden');
noticeToggleElement.css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
noticeToggleElement.css('overflow','visible');
noticeToggleElement.css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
As you should have the context of the element you toggle on with the mouse click.
As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:
$(function(){
$('div.notice-content').click(toggle);
})
But this is just a plus.
What you should do first is move that styling from js to css,
and have additional variations of your classes, for example:
.notice-title--toggled {
...
}
.notice-content--toggled {
...
}
.notice-toggle--toggled {
...
}
Now you have good separation of concerns, and your toggle function could just toggle classes for those elements.
Also you should put this toggle click handler on document ready, so final result would be:
$(function) {
$('.notice-toggle').click(function() {
$('.notice-title').toggleClass('notice-title--toggled');
$('.notice-content').toggleClass('notice-content--toggled');
$('.notice-toggle').toggleClass('notice-toggle--toggled');
});
}
JSFiddle demonstrating problem (pretty hard to see with the corner box)
I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.
I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.
Am i using nested if statements incorrectly or is it something that isn't compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If I've missed anything out, feel free to ask.
Thanks
(Javascript Code)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});
Your should add class to your container and before showing the desired container, hide all container with that class.
Example
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
Your example
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide class is added to your container
Add a slider class (or any other) to each container and link the container with button using data attribute:
Button:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
Container:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
Script:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
DEMO
If you want to also toggle container on click, use slideToggle():
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});
DEMO