Как сделать чтоб повторное нажатие кнопки убирало контент?

Question

Есть код

<script type="text/javascript" language="javascript" src="/js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").load("https://site.ru/test.php");
})
});
</script>
<div id="div"><h2>Dynamic chart</h2></div>
<button>Get Dynamic chart</button>

Кнопкой подгружается контент взятый из ссылки.

Как сделать чтобы при нажатии кнопка меняла название "Get Dynamic chart" на "Close Dynamic chart" и повторным нажатием контент исчезал.
Плюс если существует возможность при закрытии контента полученные ранее данные не хранились (javascript, css), которые находятся внутри файла test.php

Answer 1

$(document).ready(function() {
  let loaded = false; // Индикатор загруженного графика
  let originalContent = $("#div").html(); // Заглушка графика

  $("button").click(function() {
    if (loaded) {
      $("#div").html(originalContent);
      loaded = false;
      this.innerText = 'Get Dynamic chart';
    } else {
      this.disabled = true; // Исключаем возможность повторных запросов
      $.get("https://stackoverflow.getsandbox.com:443/dashboard", function(html) {
        $("#div").html(html);
        $("button").prop('disabled', false).text('Close Dynamic chart');
        loaded = true;
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div">
  <h2>Dynamic chart</h2>
</div>
<button>Get Dynamic chart</button>

БЛОГ НА HUSL

Как сделать чтоб повторное нажатие кнопки убирало контент?

Ответы (1 шт):