How to change visibility of a div css to visible with jQuery


Tags: javascript,jquery,html,css

Problem :

I have NEXT and PREVIOUS buttons on my screen. When the page initially loads I want the Previous button to be hidden and as soon as user clicks the Next button I want Previous button (div tag to be visible). I have a CSS property for Previous button where I am setting the visibility value to False. And also an if statement where I check to see if page counter is greater than 1 then change the visibility of navigationButtonTop to true. It is not working..what am I doing wrong !?

$(function() {
  $("#navigationButtonTop").css("visibility", "visible");
});
div.navigationButtonTop {
  visibility: hidden;
  height: 100px;
  width: 100px;
  background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationButtonTop"></div>



Solution :

firstly you have not closed your if statement and navigationButtonTop is a class not a id try this.

if (that.get("pageCounter") >= 1) {
     $(".navigationButtonTop").css("visibility", "visible");
}

as the OP has edited his question the new answer would be:

$(function() {
  $(".navigationButtonTop").css("visibility", "visible");
});

    CSS Howto..

    How to set the maximum height of CSS images?

    How to format a long
     HTML block suitable for width limited device such as iPhone

    How to use css in asp.net for web server control?

    How to apply inverse text mask with CSS

    How do I remove Bootstrap from asp.net project?

    How can I center div in div in IE7

    How to show just one line of text in paragraph with width 100% which is part of the table cell?

    How do you skew a div and keep the background image unskewed

    how to position a css sprite as background for another class

    Reposition and show live results upwards

    how to change css for flip animation on button click?

    Showing/hiding content with jQuery

    How to vertically align inline-block divs without vertical spaces using CSS?

    how to stop this irritating css behaviour

    How to stop a timeOut animation that contains multiple timeOut animations within

    How i can put a picture above a border in css?

    how to make NGINX serve static content like .js, .css, .html?

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to avoid background image tile when browser window resizes

    css how to make this div at the bottom of another div [duplicate]

    How to override the CSS !important property when the original file loads after the customized css file

    how to apply css style only to homepage

    how to get the cssText of external style?

    HTML+CSS: How to add arrow to horizontal menu items?

    How to fix on Mobile Devices? Custom CSS. (Wordpress)

    How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

    How to make text input in table cell grow beyond the limits of the table when selected?

    CSS: How to remove enter from HTML?

    How to create a gullwing shape with CSS

    How do you customise HTML select option menus? [duplicate]