Home/ Questions/Q 6834515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:07:15+00:00

I have a jsfiddle below: http://jsfiddle.net/Jsh2V/10/ The first sets of test buttons (show it

  • 0

I have a jsfiddle below:

http://jsfiddle.net/Jsh2V/10/

The first sets of test buttons (“show it” and “hide it”) work great. I have been trying to get the second set of buttons (“Have it” and “Need it”) to do the same thing with a div. Not working. Any suggestions? Also, if theres a more efficient way to do this…

Here the code from the Fiddle:

<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button class="1">Show it</button>
  <button class="2">Hide it</button>

      <p style="display: none" class="1">Hello</p>
      <p style="display: none" class="2">Un Hello!</p>
<script>
    $("button.1").click(function () {
    $("p.1").show("slow");
    $("p.2").hide("fast");
    });
</script>
<script>
    $("button.2").click(function () {
    $("p.1").hide("fast");
    $("p.2").show("slow");
    });
</script>


    <button class="have">Have</button>
    <button class="need">Need</button>

    <div id="have" style="display: none">HAVE YO</div>
    <div id="need" style="display: none">NEED YO</div>
<script>
    $("button.have").click(function () {
    $("div.have").show("slow");
    $("div.need").hide("fast");
    });
</script>
<script>
    $("button.need").click(function () {
    $("div.need").show("slow");
    $("div.have").hide("fast");
    });
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Should be div#have instead of div.have, since your divs have an id of have, not a class of have.

    <script>
    $("button.have").click(function () {
    $("div#have").show("slow");
    $("div#need").hide("fast");
    });
</script>
<script>
    $("button.need").click(function () {
    $("div#need").show("slow");
    $("div#have").hide("fast");
    });
</script>
    • 0