Home/ Questions/Q 6784959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:03:53+00:00

I’d like to have a a div show only when one button is clicked

  • 0

I’d like to have a a div show only when one button is clicked and also have it close when the other button is clicked. I have the code below but when I added it to m y page, everything disappeared except for the buttons. How do I get it toddle just a particular DIV.

<style>
  div { background:#def3ca; margin:3px; width:80px; 
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
<script>
$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    /* use callee so don't have to name the function */
    $(this).next("div").show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason everything disappears is because you told it to! In your CSS, you have the rule for all divs to be display: none; (invisible).

    Instead, you want only the div you are trying to hide initially to have an inline style of display: none;.

    i.e. change your CSS to:

    <style>
  div { background:#def3ca; margin:3px; width:80px; 
  float:left; text-align:center; }
  </style>

    and your divs to:

      <div style="display: none;">Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
    • 0