Home/ Questions/Q 8378997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T16:03:39+00:00

I have a div called ‘info’ that I want to be displayed when a

  • 0

I have a div called ‘info’ that I want to be displayed when a button is clicked.

<button>Toggle</button>
<div id="toggle">
Test
</div>

Basically I would like to use jQuery to reveal it with a sliding feature but I don’t know how. I can find most of the code online and see snippets, but I don’t actually know WHERE to put most of it, could someone please walk me through what and where I would need to put the relevant bits of code (from scratch) to get this working? Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS

    #toggle {
  display: none
}

    jQuery

    $(document).ready(function() {
   $('button').on('click', function() {
     $('#toggle').slideToggle();
   });
});

    A little explanation:

    • $('button') is the selector to the button tag.

    • $('button').on('click', is for bind click event to button.

    • the second parameter of on() here is callback handler and code within it will execute after click to the button.

    • $('#toggle') is the selector to the div with id=toggle.

    • $('#toggle').slideToggle() will make a sliding (up-down) effect to the div when button click.

    Note

    You should do your code within jQuery dom ready function. Which is like:

    $(document).ready(function() {
  // your code
})

    in short

    $(function() {
  // your code
});

    As these are JavaScript code, so you need to put them within <script> tag. for example:

    <script type="text/javascript">
    $(document).ready(function() {
       $('button').on('click', function() {
         $('#toggle').slideToggle();
       });
    });
</script>

    But, if you write this code to an external file then you have to include that file within <head> tag like below:

    <script type="text/javascript" src="src_to_script"></script>

    According to comment

    Is it possible to make the button disappear when it is first clicked?

    Yes, possible. Try like below:

    $(document).ready(function() {
   $('button').on('click', function() {
     $(this).hide(); // disappear the button after first click
     $('#toggle').slideToggle();
   });
});
    • 0