CODEWITHSUNDEEP
javascriptjqueryhtmlcss
HereToLearn_
HereToLearn_

Reputation: 1190

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

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>

Upvotes: 26

Views: 73399

Answers (5)

Riccardo Volpe
Riccardo Volpe

Reputation: 1623

Here a good jQuery plugin that saved me in a Materialize's collapsible customization, to avoid the use of a click event replaced with this visibilityChanged event.

In particular, the used code (among the various alternatives described in the plugin page) has been:

HTML

<li id="collapsible_trigger">
    <div class="collapsible-header"></div>
    <div class="collapsible-body"></div>
</li>

<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="hideshow.min.js"></script>

JS

$("#collapsible_trigger .collapsible-body").hideShow();
$("#collapsible_trigger .collapsible-body").on("visibilityChanged", function(event, visibility){
    /* your custom code here */
});

Upvotes: 0

Josh Stevens
Josh Stevens

Reputation: 4221

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

Upvotes: 41

Seika85
Seika85

Reputation: 2021

First of all, the code of how you actually like to trigger the event, would be nice to know. Maybe the trigger is not working at all?

Additionaly you addressed differently. In CSS navigationButtonTop is a class (see the ".") and in JS it's an id (see the "#"). Is this the culprit in your atual code? If not I'll assume it's an id further...

For more readability try to move your visibility: hidden to an extra hidden class. So you just can trigger:

$("#navigationButtonBottom").on('click', function() {
  $("#navigationButtonTop").removeClass('hidden');
});

And in you HTML add the class hidden to your button

#navigationButtonTop.hidden { visibility:hidden; }

Or do it using javascript:

jQuery(document).ready( function($) {
  $("#navigationButtonTop").addClass('hidden');
})

Upvotes: 5

Sergei Varzin
Sergei Varzin

Reputation: 21

In your JS you use ID ("#" sign before selector's name). But in your CSS you use CLASS (dot sign before selector's name).

Try to use "#" in both cases (or dot accordingly).

Upvotes: 2

tichra
tichra

Reputation: 553

Havde you tried $("#navigationButtonTop").show();

Upvotes: 1

Related Questions