Question: 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 !?

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

```css
div.navigationButtonTop {
  visibility: hidden;
  height: 100px;
  width: 100px;
  background-color:blue;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationButtonTop"></div>
```

Answer: 
Havde you tried $("#navigationButtonTop").show();
[Here](https://www.jqueryscript.net/other/Detect-DOM-Visibility-Change-jQuery-HideShow.html) a good *jQuery plugin* that saved me in a [*Materialize's collapsible*](https://materializecss.com/collapsible.html) 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 */
});

```