javascript – How to make the content load only after clicking the button

Question:

How can I redo the code so that the content is loaded only after the button is pressed? Now the content is loaded regardless of the click, after clicking it is just shown. Thanks in advance with best regards. Button code:

$(document).ready(function() {
  $("#demo").on("hide.bs.collapse", function() {
    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Показать');
  });
  $("#demo").on("show.bs.collapse", function() {
    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Закрыть');
  });
});
.tp-sbscr-widget-alert {
  display: none!important;
}
.glyphicon,
.glyphicon-star {
  color: #f5a626 !important;
}
body {
  font: 400 15px Lato, sans-serif;
  line-height: 1.8;
  color: #818181;
}
p {
  margin: 10px 10px 10px!important;
}
.btn,
.btn1,
.btn2,
.btn3,
.btn4,
.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 5px;
}
h4 {
  font-size: 19px;
  line-height: 1.375em;
  color: #303030;
  font-weight: 400;
}
.logo {
  color: #f4511e;
  font-size: 200px;
}
.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.carousel-control.right,
.carousel-control.left {
  background-image: none;
  color: #f4511e;
}
.carousel-indicators li {
  border-color: #f4511e;
}
.carousel-indicators li.active {
  background-color: #f4511e;
}
.item h4 {
  font-size: 19px;
  line-height: 1.375em;
  font-weight: 400;
  font-style: italic;
  margin: 70px 0;
}
.item span {
  font-style: normal;
}
.panel-default>.panel-heading {
  color: #333;
  background-color: #fdd835!important;
  border-color: #ddd;
}
.panel-footer {
  background-color: white !important;
}
.panel-footer h3 {
  font-size: 32px;
}
.panel-footer h4 {
  color: #aaa;
  font-size: 14px;
}
.panel-footer .btn {
  margin: 15px 0;
  background-color: #f4511e;
  color: #fff;
}
.navbar {
  margin-bottom: 0;
  background: rgba(51, 122, 183, 0.88) url(http://avia-avia.ru/image/bluefon.png)!important;
  z-index: 9999;
  border: 0;
  line-height: 1.42857143 !important;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
  border-bottom: 1px solid #fff;
}
.navbar li a,
.navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #f4511e !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  color: #f4511e;
}
table,
td {
  color: #777777;
}
.slideanim {
  visibility: hidden;
}
.slide {
  animation-name: slide;
  -webkit-animation-name: slide;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}
.bs-wizard {
  border-bottom: solid 1px #e0e0e0;
  padding: 0 0 10px 0;
}
.bs-wizard > .bs-wizard-step {
  padding: 0;
  position: relative;
}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {} .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
  color: #595959;
  font-size: 16px;
  margin-bottom: 5px;
}
.bs-wizard > .bs-wizard-step .bs-wizard-info {
  color: #999;
  font-size: 14px;
}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {
  position: absolute;
  width: 30px;
  height: 30px;
  display: block;
  background: #fbe8aa;
  top: 50px;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
  content: ' ';
  width: 14px;
  height: 14px;
  background: #fbbd19;
  border-radius: 50px;
  position: absolute;
  top: 8px;
  left: 8px;
}
.bs-wizard > .bs-wizard-step > .progress {
  position: relative;
  border-radius: 0px;
  height: 8px;
  box-shadow: none;
  margin: 20px 0;
  background: #fbe8aa !important;
}
.bs-wizard > .bs-wizard-step > .progress > .bar {
  width: 0px;
  box-shadow: none;
  background: #fbe8aa!important;
}
.bs-wizard > .bs-wizard-step.complete > .progress > .bar {
  width: 100%;
  background: #fbe8aa !important;
}
.bs-wizard > .bs-wizard-step.active > .progress > .bar {
  width: 50%;
  background: #fbe8aa !important;
}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .bar {
  width: 100%;
}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .bar {
  width: 100%;
}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
  background-color: #f5f5f5;
}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {
  opacity: 0;
}
.bs-wizard > .bs-wizard-step:first-child > .progress {
  left: 0%;
  width: 100%;
}
.bs-wizard > .bs-wizard-step:last-child > .progress {
  width: 50%;
}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot {
  pointer-events: none;
}
@keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 35px;
  }
  .mob {
    display: none!important;
  }
}
@media screen and (max-width: 480px) {
  .logo {
    font-size: 150px;
  }
  .mob {
    display: none!important;
  }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script async="async" src="http://avia-avia.ru/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" style="padding:0px; margin:0px auto;text-align:center;">
  <h2>Больше авиабилетов<br>из Москвы в Адлер</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Показать</button>
  <div id="demo" class="collapse">
    <div class="table-responsive">
      КОНТЕНТ
    </div>
  </div>
</div>

Answer:

This can be done using AJAX. The code that you provided does not explain what you actually want to load. And I’ll add on my own, if we are talking about loading a small paragraph of text, then it’s better not to make any AJAX requests.

Scroll to Top