show/hide elements and switch between them js

Question

I have two elements that are hidden. When button a is clicked, I would like div a to show. When button b is clicked, I would like div a to close and div b to show.

However, if button a is clicked a second time after being shown, I would like it to hide the div again. Same with button b.

Update:

I was able to get the buttons to toggle properly.

However, upon initial loading, I want them to be hidden, or not visible until the button is clicked.

The following is my current javascript

  function openFamily(evt, famName) {

        var i, x, y, tablinks;
        x = document.getElementsByClassName("family");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("familytablink");
        for (i = 0; i < x.length; i++) 

        document.getElementById(famName).style.display = "block";

    }

I have a CSS element:

.container{
display: none;

}

HTML:

    <div>
        <div>
             <button class="familytablink" onclick="openFamily(event,'zep')">Zephaniah</button>
            <button class="familytablink" onclick="openFamily(event,'anna')">Anna</button>
        </div>
    <div id="zep" class="container mainp-2 family">
        filler text
    </div>

    <div id="anna" class="container mainp-2 family">
        filler text
    </div>
    </div>

have you check this https://stackoverflow.com/questions/6242976/javascript-hide-show-element — Sofyan Thayf, Oct 04 '19 at 05:27
Possible duplicate of [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Sofyan Thayf, Oct 04 '19 at 05:27
I've tried several options. I started with hiding the
elements that I want to be shown with css using the display:none; I also used: function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } to open them. I got that part to work, but what I can't figure out is how to make the first one close when the second is clicked on, opening the second one. I can post a link to the page I am working on in a little bit Sorry for the lack of code included. — NocRaz, Oct 05 '19 at 02:30

score 0 · Answer 1 · edited Oct 04 '19 at 07:22

0

You can use hide and show function in Jquery and use it when a button is clicked something like this :

like

$("selector").click(function(){
    $("divid").hide();
    $("divid").show();
})

edited Oct 04 '19 at 07:22

Amit Kumar PRO

1,222
2
15
27

answered Oct 04 '19 at 05:31

Kamil007

21
6

score 0 · Answer 2 · edited Oct 04 '19 at 05:46

In jQuery:

 <script type="application/javascript">
    $(document).ready(function(){
      $("#button1").click(function(){
        $("diva").show();
      });
      $("#button2").click(function(){
        $("diva").hide();
        $("divb").show();

      });
    });
    </script>

In JS:

<script type="application/javascript">
   function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
         x.style.display = "block";
      } else {
         x.style.display = "none";
      }
   }
</script>

score 0 · Answer 3 · answered Oct 04 '19 at 05:41

Here's an exemple of how you can achieve that

var toggleDivById = function (id) {
  var div = document.getElementById(id);
  if (div.classList.contains('active')) {
    return div.classList.remove('active');
  }
  
  div.classList.add('active');
}

var handleToggleClick = function (event) {
  var targetId = event.target.dataset.target;
  toggleDivById(targetId);
}

document.querySelectorAll('.toggle')
  .forEach(function(toggle) {
    toggle.addEventListener('click', handleToggleClick)
  })

.toggable {
  width: 50px;
  height: 50px;
  background-color: crimson;
  border: 2px solid tomato;
  visibility: hidden;
  transition: all 100ms ease-out;
  border-radius: 5px;
  box-shadow: 1px 1px 2px indianred;
}

.toggable.active {
  visibility: visible
}

<button data-target="a" class="toggle">A</button>
<button data-target="b" class="toggle">B</button>
<hr/>
<div id="a" class="toggable">A</div>
<div id="b" class="toggable">B</div>

I just wanted to say thank you! It works perfectly! Not exactly what I was looking to do, but close enough for me to run with it! Thank you thank you!!! — NocRaz, Oct 06 '19 at 02:17

show/hide elements and switch between them js

3 Answers3