Question 45221 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search