Javascript to Hide/Show Div using buttons, HTML is in a rich text component in AEM, can't get it to work?

Question

I cannot get this to work.

I have 2 buttons. I also have divs. When I click 1 button, I want 1 div to show and for the other to be hidden. When I click the other button, I want the opposite to happen. They should both be hidden on default.

Javascript function:

$(document).ready(function() {
  $("#button-one").click(function() {
    $("#div-one").hide();
    $("#div-two").show();
  });
});

$(document).ready(function() {
  $("#button-two").click(function() {
    $("#div-one").show();
    $("#div-two").hide();
  });
});

I have also tried $('#sdfsdfs').css('display', 'block'), and document.getElementById("fsdfsdf").style.display="block";

HTML extract:

  
      <div class="buttonOne">
        <button id="button-one" value="button one"> Button One </button>
      </div>
      <div class="buttonTwo">
        <button id="button-two" value="button two"> Button Two </button>
      </div>
      <div class="divOne" id="div-one" style="display: none;">
Some HTML
      </div>
      <div class="divTwo" id="div-two" style="display: none;">
Some HTML
      </div>
    </div>
</div>

Code above is how it goes, ignore the names.

What happens is when I load the page, each div is set to display: none, which is fine, however the clicks do not change the display to show. I am editing the values of a rich text component in AEM as well if that changes anything.

I have 2 buttons. I also have divs. When I click 1 button, I want 1 div to show and for the other to be hidden. When I click the other button, I want the opposite to happen. They should both be hidden on default.

Code all is put above. Tried a lot of different ways of editing display, as well as setting the ID on css itself to display: none and editing on javascript.

score 0 · Answer 1 · answered Feb 17 '23 at 23:45

you have many mistakes that you can see if you want to.

your id for your second div that you want to show is not the same in your javascript divTwo vs. div-two

another is your last div isnt closed before you close the form.

another is that you have html inside a script tag? </script> is a closing tag.

and finally, its not a big deal but you should only have 1 ready js event. i left it in for you to show you that is still does work though.

here is working version of your code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
    
    <div class="buttonOne">
        <button id="button-one" value="button one"> Button One </button>
      </div>

      <div class="buttonTwo">
        <button id="button-two" value="button two"> Button Two </button>
      </div>

      <div class="divOne" id="div-one" style="display: none;">Some HTML 1</div>
      <div class="divTwo" id="div-two" style="display: none;">Some HTML 2</div>

    <script type="text/javascript">

        $(document).ready(function() {
          $("#button-one").click(function() {
            $("#div-one").hide();
            $("#div-two").show();
          });
        });

        $(document).ready(function() {
          $("#button-two").click(function() {
            $("#div-one").show();
            $("#div-two").hide();
          });
        });

    </script>
</body>
</html>

The code is just a snippet hence the script tag, its a bit abstract and not actually what it looks like. The HTML in my actual code works fine Do you see anything wrong with the javascript itself and how I do the click function? Thanks — redcactus, Feb 18 '23 at 00:38

score 0 · Answer 2 · answered Feb 18 '23 at 05:23

You can use fadeIn() to show the content, it gives a nice effect

<script type="text/javascript">

    $(document).ready(function() {
      $("#button-one").click(function() {
        $("#div-one").hide();
        $("#div-two").fadeIn();
      });
    });

    $(document).ready(function() {
      $("#button-two").click(function() {
        $("#div-one").fadeIn();
        $("#div-two").hide();
      });
    });

</script>

Javascript to Hide/Show Div using buttons, HTML is in a rich text component in AEM, can't get it to work?

2 Answers2