Jquery .Show() Not Revealing a Div with Visibility of Hidden

Jquery .show() not revealing a div with visibility of hidden

If you have hidden it with visibility:hidden then you can show it with jQuery by

$(".Deposit").css('visibility', 'visible');

And in the fiddle you are missing jQuery. Here is a demo: http://jsfiddle.net/9Z6nt/20/

Jquery .show() not revealing a div with visibility of hidden

If you have hidden it with visibility:hidden then you can show it with jQuery by

$(".Deposit").css('visibility', 'visible');

And in the fiddle you are missing jQuery. Here is a demo: http://jsfiddle.net/9Z6nt/20/

Hiding and showing a div using jQuery

Firstly, let me say that jQuery already has a feature for that, named .toggle.

Secondly, if you're hiding a div, it isn't anymore inside your page, so you won't be able to click it.

So, if you wanna do that, you'll need to use the CSS opacity: 0, or visibility: hidden. E.g:

$(this).css('visibility', 'hidden');  // to hide
$(this).css('visibility', 'visible'); // to show

Why does jQuery show/hide use display:none instead of visibility:hidden?

Because in display:none, the element, for all purposes, ceases to exist -- it doesn't occupy any space.
However, in visibility:hidden, it's as if you had just added opacity:0 to the element -- it occupies the same amount of space but just acts invisible.

The jQuery creators probably thought the former would be a better fit for .hide().

show/hide a div with javascript not jquery, and not with display:none

Keep your React/jQ as-is, but show and hide your elements with CSS transitions, like fading with opacity:

.show {
    opacity: 1 !important;
    transition: opacity .5s;
}

.hide {
    opacity: 0 !important;
    transition: opacity .5s;
}

How do I check if an element is hidden in jQuery?

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

simple jQuery show() Fails

Here you go with a solution https://jsfiddle.net/bb7ms7zo/

$(function(){   $('#hi').css({     visibility: 'visible'  }); });

#hi{visibility:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span id="hi">hi</span>

JQuery Show More Link not revealing all hidden text for post

Looking through similar code I have on my website I found the below solved the issue. Because the content div is a parent that is there when the page loads, before the Ajax request creates the rest of the html, I used this to attach to the showMore div.
Thank you yinsweet for your help!

$(document).ready(function(){

$(".content").on("click",".showMore a", function() {

  var $this = $(this);

  var content = $this.parent().prev()
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    content.switchClass("hideContent", "showContent", 400);

  } else {
    linkText = "Show more";
    content.switchClass("showContent", "hideContent", 400);
  }

  $this.text(linkText);
});

});

jQuery hide only if visible, show only if hidden

You can do this:

$(".user").click(function () {
    // Hide it but only if not hidden - hide
    $('.trigger:visible').hide();

    // Later in the script - Show it but only If it's not visible.  
    $('.trigger:hidden').show();
});

For some more context, elements are deemed ":hidden" if:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• Or an ancestor element is hidden, so the element is not shown on the page.

Additionally, "elements with visibility: hidden or opacity: 0 are considered to be visible."

Source: https://api.jquery.com/hidden-selector

---

Related Topics