javascript - 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:

1. Having a sticky bar at the bottom of the website (done) which automatically closes after 5 seconds after opening the page (not done)
2. 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');
    });
});

question from:https://stackoverflow.com/questions/65873672/jquery-image-click-hide-show

Answer 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');
});