Bootstrap Snippet Collapse with iframe3 using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="panel-group" id="accordion">
     
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <button data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="btn btn-primary">Feedback form</button>
        
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          
        <div id="carsearch-mobile" data-src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sde!2sus!4v1477413845934!6m8!1m7!1sdnK7KCRD21wAAAQo8X6xJA!2m2!1d51.48150236104869!2d7.142771589600898!3f359!4f0!5f0.7820865974627469" class="tab-pane">
            <div id="carsearch-loader" class="wrap-loading">
                <div class="loading loading-3"></div>
            </div>
            <iframe id="carsearch-sidebar" src="" class="carsearch-iframe" frameborder="0" width="100%" height="320px" scrolling="no"></iframe>
        </div>
      </div>
    </div>
  </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#collapseTwo').on('shown.bs.collapse', function () {
   // if the iframe hasn't already been loaded once
   
   // src = "http://darmas.dotzilla-web.de/Iframes/Schnellsuche";
   
   src = $("#carsearch-mobile").attr("data-src");
    
    if ($("#carsearch-sidebar").attr("src")=="") {
        $("#carsearch-sidebar").attr("src",src);
    }
    
    $('#carsearch-sidebar').on('load', function () {
                    $('#carsearch-loader').fadeOut(400, function () {
                        $('#carsearch-sidebar').fadeTo(400, 1);
                    });
            });
    
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Collapse with iframe3"
Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Collapse with iframe3" Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Collapse with iframe3"
Bootstrap 3.3.0 Snippet by ASDAFF