Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

Question

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

I've been working on implementing a toggle div with a tooltip. The issue I'm facing is that the tooltip initially displays "Click to open", but after opening the toggle, it should change to "Click to close". Can someone assist me in achieving this functionality?

If you'd like to take a look at my project, you can download the zip file here.

You can also view the project live by clicking on this Live Link.

$(document).ready(function(){
    $(".latestnews").click(function(){
        $(".latestnews_toggle").toggle(1000);
    });
});

I would greatly appreciate any help in fixing the tooltip to display the appropriate message for opening and closing. It should show "Click to open" when closed and "Click to close" when opened.

javascript jquery ajax html css

Answer 1

Answer №1

The simplest method is to introduce a "status" variable such as var widgetIsOpen = false. To toggle the state of the widget, just use widgetIsOpen = !widgetIsOpen; and update the text accordingly based on the variable's value.

If you need to dynamically assign a message, consult the documentation:

<script>
  var widgetIsOpen = true;
  $(document).ready(function(){
     $(".latestnews").click(function(){
        widgetIsOpen = !widgetIsOpen;
        $(".latestnews_toggle").toggle(1000);
     });
  });
  $(document).ready(function() {
    $('.rgttool').tinytooltip({
       message: function(tip) {
          if(widgetIsOpen===true) {return "Click to close";}
          return "Click to open";
        }
     });
  });
</script>

Answer 2

The simplest method is to introduce a "status" variable such as var widgetIsOpen = false. To toggle the state of the widget, just use widgetIsOpen = !widgetIsOpen; and update the text accordingly based on the variable's value.

If you need to dynamically assign a message, consult the documentation:

<script>
  var widgetIsOpen = true;
  $(document).ready(function(){
     $(".latestnews").click(function(){
        widgetIsOpen = !widgetIsOpen;
        $(".latestnews_toggle").toggle(1000);
     });
  });
  $(document).ready(function() {
    $('.rgttool').tinytooltip({
       message: function(tip) {
          if(widgetIsOpen===true) {return "Click to close";}
          return "Click to open";
        }
     });
  });
</script>

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

Answer №1

Similar questions

Encountering an error in Express while attempting to upload an image due to the inability to read the property 'file' of undefined

Is Javascript the best choice for managing multiple instances of similar HTML code?

Validation of dynamically generated name fields using radio button group

Retrieve only the names of keys from a JSON object presented in array form using Node.js

"Can someone provide guidance on properly aligning an image in a div

(codesandbox) Is there a way to have both the label 'checkbox' and the first option pre-checked and pre-selected?

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

Encountering a "Cannot modify" error in wp-admin while using inspect element

Streaming live video on the website

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

Django is causing a TemplateSyntaxError while attempting to extend the "template.html" file with the static keyword

Sending a string of HTML elements to a Vue custom directive is causing problems with the eslint code analysis

Creating a Responsive Design with Bootstrap 4 - Adjustable Height Structure

Integrating Symfony2 with Twig while passing a variable in a controller

Aligning the navigation links vertically

Could you explain the distinction between Node.bind() and Template Binding?

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown

Rendering in Three JS involves efficiently utilizing one buffer to display the output within itself

Turn on/off the button click functionality on a jQuery smart wizard control

Express bodyParser may encounter difficulties in parsing data sent from Internet Explorer