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

Question

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

191 views Asked by redcactus At 08 September 2024 at 14:47

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.

Original Q&A

There are 2 answers

**Dan** · Answer 1 · 2023-02-17 23:45:46

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>

**hugohfo** · Answer 2 · 2023-02-18 05:23:24

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>

TechQA.

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

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in AEM

Related Questions in ADOBE-EXPRIENCE-MANAGER

Popular Questions

Popular Tags

Trending Questions