jQuery image click hide/show

Question

i have googled much about this problem but sadly havent found a working solution and i dont have any expertise in javascript sadly.

I want to achieve the following:

Having a sticky bar at the bottom of the website (done) which automatically closes after 5 seconds after opening the page (not done)
After 5 seconds the sticky bar should automatically slide down and only an orange arrow (which is an image) should be visible

I managed to implement a jquery script which already achieves the content "closing" when i click on the button.

But i cant manage to link the image to do the same functionality as the button and i dont know what to do.

Plus the automatic 5 seconds closing after opening the page is also not implemented yet.

The jquery script:

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

Here is the working button at the top which hides "Hello World" and at the bottom there is the orange image with the white arrow which sould have the same functionality as the button above to hide the content directly under it.

Code from the "Hello World" and Button

Code from the orange image with the white arrow

Code from the content with orange background under the image with the arrow

Take a look at setInterval method: developer.mozilla.org/en-US/docs/Web/API/… — Anderson Pimentel
– Anderson Pimentel, Commented Jan 24, 2021 at 17:23

Kriscius · Accepted Answer · 2021-01-24 17:31:20Z

1

Use setTimeout() method, you can learn more about it here So you could do this:

jQuery(document).ready(function(){
    setTimeout(function(){
        jQuery('#content').addClass('hide'); // or toggle using 'show' class
    }, 5000);

    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

In code with arrow button use tag, like:

<div class="bar">
    <a href="#" id="closeButton" class="arrowBtn"><img src="arrow.png" alt="Arrow button"></a>
</div>

Then you could use jQuery to listen on click event on that button:

jQuery('#closeButton').on('click', function(event) {
    event.preventDefault();
    $('#content').toggle('show');
});

answered Jan 24, 2021 at 17:31

Kriscius

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moonman Over a year ago

This did not work, i pasted the following into the script.js file:

jQuery(document).ready(function(){     setTimeout(function(){         jQuery('#content').addClass('hide'); // or toggle using 'show' class     }, 5000);       jQuery('#hideshow').on('click', function(event) {                 event.preventDefault();         jQuery('#content').toggle('show');     }); });

and the following for the image arrow "button": <div class="bar"> <a href="#" id="hideshow" class="arrowBtn"><img src="arrow.png" alt="Arrow button"></a> </div> Clicking does no action

moonman Over a year ago

Pasting this code also made the initial test with "Hello World" and the Button also not work anymore. The 5 seconds hide function does not work either.

Collectives™ on Stack Overflow

jQuery image click hide/show

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related