Pokazywanie i ukrywanie diva po kliknięciu w przycisk, połączenie dwóch funkcji JS

Question

Cześć,
uczyłem się jak zrobić sekcje div które pokazują się lub chowają po kliknięciu w przycisk Hide/Show. Jak połączyć myFunction1() i myFunction2() żeby kliknięcie w przycisk1 powodowało zamykanie otwieranie tylko sekcji myDIV1   i nie wpływało w żaden sposób na  sekcję myDIV2  i na odwrót?

<script>
function myFunction1() {
    var x = document.getElementById("myDIV1");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
function myFunction2() {
    var x = document.getElementById("myDIV2");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
</script>

Dziekuje i pozdrawiam

Answer 1

https://codepen.io/anon/pen/zJwZzG?editors=1111

Comments

Dziekuje, jeszcze pytanko, jak zmieniac napis na przycisku show/hide w zależnosci od działania?

---

Tak samo jak zmieniasz display na none i block;

wrzuć to do callbacka, którego przypisujesz na event click  buttona

    this.textContent === 'hide' ? 
      this.textContent = 'show' :
      this.textContent = 'hide';

 

---

Przepraszam, gdzie mam to umieścic?

---

 

https://codepen.io/anon/pen/zJwZzG?editors=1111

Polecam też pogłówkować i wydzielić tę duża funkcję na kilka mniejszych. Taki trening dobrych praktyk.